Jump to content

jakeamo

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About jakeamo

  • Rank
    Newbie
  1. How do I make sections of the accordion collapse when I open another so that there is only ever one section opened at a time? I am using the following code: <!DOCTYPE html> <html> <head> <style> button.accordion { background-color: #fffff; color: #093479; cursor: pointer; padding: 18px; width: 100%; border: show; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #949C57; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: 0.6s ease-in-out; opacity: 0; } div.panel.show { opacity: 1; max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */ } button.accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #093479; float: right; margin-left: 5px; } button.accordion.active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } </style> </head> <body> <button class="accordion">Self-Managed Super Funds</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">Business Accounting and Tax Returns</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">Taxation</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">Tax Effective Structures and Asset Protection</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">Individual Tax Returns</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">Business Activity Statements</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">MYOB Support</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">Family Trusts</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.onclick = function(){ this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } </script> </body> </html>
×