Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
guldus98
committed
Feb 24, 2019
1 parent
d21d9ef
commit 3bb73ef
Showing
3 changed files
with
148 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| @import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou'); | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| background: ; | ||
| font-family: 'ZCOOL QingKe HuangYou', cursive; | ||
| } | ||
| .container{ | ||
| width: 325px; | ||
| margin: 50px auto; | ||
| } | ||
| .accordion { | ||
| width: 100%; | ||
| background: #00bcd4; | ||
| padding: 15px; | ||
| box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.25); | ||
| color: #fff; | ||
| font-size: 21px; | ||
| text-indent: 10px; | ||
| box-sizing: border-box; | ||
| } | ||
| .item { | ||
| background: #fff; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| font-size: 18px; | ||
| margin: 6px 0px; | ||
| transition: .5s; | ||
| } | ||
| .section { | ||
| position: relative; | ||
| padding: 15px; | ||
| color: #262626; | ||
| cursor: pointer; | ||
| border-bottom: 1.5px solid #ccc; | ||
| } | ||
| .info { | ||
| width: 90%; | ||
| color: #808080; | ||
| max-height: 0; | ||
| opacity: 0; | ||
| transition: .5s; | ||
| } | ||
| .section:before { | ||
| font-family: "Font Awesome 5 Free"; | ||
| font-weight: 600; | ||
| content: "\f105"; | ||
| padding-right: 10px; | ||
| transition: .5s; | ||
| } | ||
| .item.active > .info { | ||
| max-height: 100%; | ||
| margin-left: 10px; | ||
| padding: 13px 10px 20px 10px; | ||
| opacity: 1; | ||
| } | ||
| .item.active { | ||
| box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50); | ||
| transform: scale(1.05); | ||
| margin-top: 8px; | ||
| margin-bottom: 8px; | ||
| } | ||
| .item.active > .section:before{ | ||
| font-family: "Font Awesome 5 Free"; | ||
| font-weight: 600; | ||
| content: "\f107"; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>page</title> | ||
| <link rel="stylesheet" type="text/css" href="Accordion Menu 4.css"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="container"> | ||
| <div class="accordion">Accordion Menu 4</div> | ||
|
|
||
| <!-- Item 1 --> | ||
| <div class="item"> | ||
| <div class="section">Read me</div> | ||
| <div class="info"> | ||
| Click on an item to open. Click on its header or the list header to close. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Item 2 --> | ||
| <div class="item"> | ||
| <div class="section">Read me too</div> | ||
| <div class="info"> | ||
| Add the class 'arrows' to nav.accordion to add dropdown arrows. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Item 3 --> | ||
| <div class="item"> | ||
| <div class="section">Item 3</div> | ||
| <div class="info"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt ut labore et dolore magna | ||
| aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor | ||
| pretium viverra suspendisse potenti. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Item 4 --> | ||
| <div class="item"> | ||
| <div class="section">Item 4</div> | ||
| <div class="info"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt ut labore et dolore magna | ||
| aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor | ||
| pretium viverra suspendisse potenti. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Item 5 --> | ||
| <div class="item"> | ||
| <div class="section">Item 5</div> | ||
| <div class="info"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt ut labore et dolore magna | ||
| aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor | ||
| pretium viverra suspendisse potenti. | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <script> | ||
|
|
||
| let item = document.querySelectorAll(".item"); | ||
|
|
||
| item.forEach((x) => x.addEventListener("click", itemFunction)) | ||
|
|
||
| function itemFunction() { | ||
| this.classList.toggle("active") | ||
| } | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.