Posted - 03/23/2022 : 11:39:55
If not, then this is the code I used inside the content region. It needs to be placed into the content region using source code view.
<br /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <style type="text/css"> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 20px; transition: 0.5s; }
.active, .accordion:hover { background-color: #6f8cb0; color: white; }
.panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; line-height:40px; }
.accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; }
.active:after { content: "\2212"; }</style> <h2> Accordion</h2> <button class="accordion">list 1</button> <div class="panel"> <p> Your content goes here</p> </div> <button class="accordion">list 2</button> <div class="panel"> <p> Your content goes here</p> </div> <button class="accordion">list 3</button> <div class="panel"> <p> Your content goes here</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>
When it gets late at night, go to bed... try again tomorrow.
![Go to Top of Page](images/icon_go_up.svg)
|