|
|
| (One intermediate revision by the same user not shown) |
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | | | |
| − |
| |
| − | <script>
| |
| − | var acc = document.getElementsByClassName("accordion");
| |
| − | var i;
| |
| − |
| |
| − | for (i = 0; i < acc.length; i++) {
| |
| − | acc[i].addEventListener("click", function() {
| |
| − | /* Toggle between adding and removing the "active" class,
| |
| − | to highlight the button that controls the panel */
| |
| − | this.classList.toggle("active");
| |
| − |
| |
| − | /* Toggle between hiding and showing the active panel */
| |
| − | var panel = this.nextElementSibling;
| |
| − | if (panel.style.display === "block") {
| |
| − | panel.style.display = "none";
| |
| − | } else {
| |
| − | panel.style.display = "block";
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − | /* Style the buttons that are used to open and close the accordion panel */
| |
| − | .accordion {
| |
| − | background-color: #eee;
| |
| − | color: #444;
| |
| − | cursor: pointer;
| |
| − | padding: 18px;
| |
| − | width: 100%;
| |
| − | text-align: left;
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | transition: 0.4s;
| |
| − | }
| |
| − |
| |
| − | /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
| |
| − | .active, .accordion:hover {
| |
| − | background-color: #ccc;
| |
| − | }
| |
| − |
| |
| − | /* Style the accordion panel. Note: hidden by default */
| |
| − | .panel {
| |
| − | padding: 0 18px;
| |
| − | background-color: white;
| |
| − | display: none;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <body>
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br>
| |
| − | <button class="accordion">Section 1</button>
| |
| − | <div class="panel">
| |
| − | <p>Lorem ipsum...</p>
| |
| − | </div>
| |
| − |
| |
| − | <button class="accordion">Section 2</button>
| |
| − | <div class="panel">
| |
| − | <p>Lorem ipsum...</p>
| |
| − | </div>
| |
| − |
| |
| − | <button class="accordion">Section 3</button>
| |
| − | <div class="panel">
| |
| − | <p>Lorem ipsum...</p>
| |
| − | </div>
| |
| − | </body>
| |
| | </html> | | </html> |
