How to expand and collapse template accordion using javascript?

Question

I have an accordion that I want to dynamically open and close with JavaScript/jQuery. I am having trouble doing that.

 <link href="https://bangi.africa/demo/css/plugins.css" rel="stylesheet"> <link href="https://bangi.africa/demo/css/style.css" rel="stylesheet"> <link href="https://bangi.africa/demo/css/custom.css" rel="stylesheet"> <script src="https://bangi.africa/demo/js/jquery.js" type="text/javascript"></script> <script src="https://bangi.africa/demo/js/plugins.js" type="text/javascript"></script> <script src="https://bangi.africa/demo/js/functions.js" type="text/javascript"></script> <<div class="body-inner"> <:-- Header --> <:-- Page Content --> <section id="page-content"> <div class="container"> <div class="row"> <div class="content col-lg-9"> <h4>Shadow</h4> <div class="toggle accordion accordion-shadow"> <div class="ac-item" id="test"> <h5 class="ac-title">Before you get started</h5> <div class="ac-content"> <p>test1</p> </div> </div> <div class="ac-item ac-active"> <h5 class="ac-title">Layout and design options</h5> <div class="ac-content"> <p>test2</p> </div> </div> <div class="ac-item"> <h5 class="ac-title">Compatibility with premium plugins</h5> <div class="ac-content"> <p>test3</p> </div> </div> </div> </div> </div> </div> </section> <:-- end: Page Content --> <!-- end: Footer --> </div> <!-- end: Body Inner -->

I have tried using something:

$("#test").addClass("ac-active");

or

$("#test").removeClass("ac-active");

But no luck, How can I expand and collapse the accordion/toggle using Javascript? This is a template I am using called Polo ( https://inspirothemes.com/polo/index.html )

EDIT: Here's the issue, the demo isn't working on the embed. Past the code into a html file and it will work. I want to make ac-item test open and close with Javascript. How can I do that?

Answer 1

If you want to make it using pure js and css you need to have a css file that says something like this

CSS

.accordion > div > h5{
  display: block;
  cursor: pointer;
  width: 100%;
  padding: 15px;
  border-bottom: 1px solid #ccc;
  background-color: #eee;
}

.accordion > div > div{

  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s;
}

.accordion > div.active > div{ /* changed the class name from ac-active to active
  display: block;
  padding: 10px;
}

and in JS file

let accordion = document.querySelector('.accordion')

Array.from(accordion.children).forEach(wrapper=>{ // wrapper is ac-item in your case
  wrapper.querySelector('h5').addEventListener('click', e=>{
    wrapper.classList.toggle('active');

    let divTag = wrapper.querySelector('div');
    if (wrapper.classList.contains("active")) {
        divTag.style.maxHeight = divTag.scrollHeight + 30 + 'px';
    } else {
        divTag.style.maxHeight = null;
    }

    Array.from(accordion.children).forEach(w=>{
      if (w != wrapper) {
        w.classList.remove('active');
        w.querySelector('div').style.maxHeight = null;
      }
    });
  });
});

Let me know if it worked for you

Answer 2

Here is the solution for jQuery . Make the dropdown text invisible by default by adding this to your css:

.ac-content {
  display: none;
}

 $('.toggle.accordion.accordion-shadow.ac-item.ac-title').click(function(){ $(this).next('.ac-content').slideToggle(); $(this).closest('.ac-item').siblings().find('.ac-content').slideUp(); });

 .ac-content { display: none; }

 <link href="https://bangi.africa/demo/css/plugins.css" rel="stylesheet"> <link href="https://bangi.africa/demo/css/style.css" rel="stylesheet"> <link href="https://bangi.africa/demo/css/custom.css" rel="stylesheet"> <script src="https://bangi.africa/demo/js/jquery.js" type="text/javascript"></script> <script src="https://bangi.africa/demo/js/plugins.js" type="text/javascript"></script> <script src="https://bangi.africa/demo/js/functions.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body-inner"> <section id="page-content"> <div class="container"> <div class="row"> <div class="content col-lg-9"> <h4>Shadow</h4> <div class="toggle accordion accordion-shadow"> <div class="ac-item" id="test"> <h5 class="ac-title">Before you get started</h5> <div class="ac-content"> <p>test1</p> </div> </div> <div class="ac-item ac-active"> <h5 class="ac-title">Layout and design options</h5> <div class="ac-content"> <p>test2</p> </div> </div> <div class="ac-item"> <h5 class="ac-title">Compatibility with premium plugins</h5> <div class="ac-content"> <p>test3</p> </div> </div> </div> </div> </div> </div> </section> </div>

Answer 3

To do this as the template does it, do this:

$('.ac-content').slideToggle();

$("#test").addClass("ac-active");