shirch Posted March 23, 2018 Share Posted March 23, 2018 Good afternoon, I have been trying to figure out how to create an accordion CSS, and how it works. Hoping someone might be able to help out, or point me in the right direction. Thank you! Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted March 23, 2018 Share Posted March 23, 2018 Put this into a CODE ELEMENT: Is that what you mean? <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body> </html> Link to comment Share on other sites More sharing options...
shirch Posted March 23, 2018 Author Share Posted March 23, 2018 Is there a way to add it to a layout container or page element without using the Code element so we can easily edit the information inside. Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted March 23, 2018 Share Posted March 23, 2018 Does the TAB ELEMENT not fit your needs on displaying content with a header? Just want to make sure we're not trying to reinvent the wheel. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.