CODEWITHSUNDEEP
javascripthtml
Jack
Jack

Reputation: 15

How to expand and collapse template accordion using javascript?

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?

Upvotes: 1

Views: 499

Answers (3)

tony
tony

Reputation: 614

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

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

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

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

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>

Upvotes: 1

nCoder
nCoder

Reputation: 145

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

Upvotes: 1

Related Questions