CODEWITHSUNDEEP
javascriptjquerycss
user11959553
user11959553

Reputation:

How to expand only one accordion tab at a time?

I want to be able to expand only one accordion tab at a time. For example if item 1 was expanded then when expanding item 2, item 2 would expand but item 1 would collapse so that only one was expanded at a time. Here is the code: https://jsfiddle.net/cliffeee/a5uxgkmt/

The code that I have written sort of works but not fully. For example, If I expand item 1, I am not able to click and collapse item 1 directly. I will have to expand item 2 to collapse item 1, which is fine, but I want to also be able to have the option to expand and collapse an item directly.

Jquery: 

    var collapsible = $('.accordion-toggle');
    for (var i = 0; i < collapsible.length; i++) {
        collapsible[i].addEventListener("click", function () {
            for (var j = 0; j < collapsible.length; j++) {
                collapsible[j].classList.remove("collapsed")
                collapsible[j].nextElementSibling.style.maxHeight = null;
            }
            this.classList.toggle("collapsed");
            var content = this.nextElementSibling;
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    };

Upvotes: 3

Views: 2589

Answers (2)

Gosi
Gosi

Reputation: 2003

You can use the JQuery Accordion library. This allows you to open only 1 tab at at time and also allow you to close an opened tab, just like how you wanted.

Try this:

$( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  } );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="accordion">
<h2>Open Collapsible</h2>
<div>
  <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>

<h2>Open Section 1</h2>
<div>
  <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>
</div>

Just add your css in accordingly.

Remember to link the JQuery and the accordion by adding it in your <head> tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Upvotes: 1

Tapas
Tapas

Reputation: 1193

Based on your fiddle following code will work

var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function(evnt) {
    const currClassList = evnt.target.classList;
    if (currClassList.contains('collapsed')) {
        evnt.target.classList.remove("collapsed");
        var content = evnt.target.nextElementSibling;
        content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
           coll[j].classList.remove("collapsed")
           coll[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("collapsed");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

Upvotes: 1

Related Questions