How to collapse accordion tabs?

Question

At the moment I have set an accordion page so when you click on each accordion tab it collapses the one above or below.

What I would like to achieve is you can click an accordion tab which opens and you can close it down.

My HTML is as follow:

<dl class="accordion">
            <dt class="title">
                <p>Accordion 1</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
            <dt class="title">
                <p>Accordion 2</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
<dt class="title">
                <p>Accordion 3</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
<dt class="title">
                <p>Accordion 4</p>
               </dt>
                <dd>
                <p>Some text for the accordion here...</p>
            </dd>
</dl>

My Jquery is:

(function($) {
var allPanels = $('.accordion > dd').hide();
    $('.accordion > dd:first-of-type').show();
    $('.accordion > dt:first-of-type').addClass('accordion-active');
  jQuery('.accordion > dt').on('click', function() {
      $this = $(this);
  $target = $this.next(); 
  if(!$this.hasClass('accordion-active')){
      $this.parent().children('dd').slideUp();

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.addClass('accordion-active');
      $target.addClass('active').slideDown();
  }    
return false;
  });

})(jQuery);

Answer 1

    (function($) {
    

  $('.accordion > dd').hide();
  $('.accordion > dd.active').show();
    
  $('.accordion > dt').on("click", function(event){
    $("dt").removeClass("active");
   
      $this = this.className;
       $(this).addClass("active");
      $target =  ("dd."+$this+"");
        $("dd").removeClass('active').slideUp();
        $($target).addClass('active').slideDown();

    
      
    return false;
  });

})(jQuery);

   
.accordion dt{
       display: inline-block;
    margin: 0;
    list-style: none;
        position: relative;
    background-color: #fff;
        padding: 10px 12px;
}
.accordion dt.active{
      background-color: #eee;
}

.accordion dd{
      padding: 15px;
      background-color: #eee;
    border-bottom: 4px solid #d6d6d6;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
        margin: 0px;
}
@media only screen and (max-width: 736px) {
 .accordion dt{
    /*width: 100%;*/
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl class="accordion">

<dt class="panel1 active"><a href="">
    Tab 1
</a></dt>
<dt class="panel2"><a href="">
    Tab 2
</a></dt>
<dt class="panel3"> <a href="">
    Tab 3
</a></dt>
<dt class="panel4"> <a href="">
    Tab 4
</a></dt>

<dd class="panel1 active">
    <h3>Tab 1 Heading</h3>

<p>Part of Sohar Aluminium's overall strategy is to promote and support the creation of a robust downstream aluminium industry in Oman to increase the value of producing Aluminium to Oman's economy as well as to create further employment and business opportunities.Sohar Aluminium has helped establish and supplies to 2 downstream companies that are in operation. These are:</p>

</dd>


<dd class="panel2">
    <h3>Tab 2 Heading</h3>

<p>Part of Sohar Aluminium's overall strategy is to promote and support the creation of a robust downstream aluminium industry in Oman to increase the value of producing Aluminium to Oman's economy as well as to create further employment and business opportunities.Sohar Aluminium has helped establish and supplies to 2 downstream companies that are in operation. These are:</p>
</dd>


<dd class="panel3">
    <h3>Tab 3 Heading</h3>

<p>The volume of liquid sold directly to the downstream will increase each year and is anticipated to reach 200,000 tonnes in the year 2016, increasing In-Country Value. The long-term plan for Sohar Aluminium is to supply 60% of its production in hot metal form to its downstream partners while the rest will be exported in the form of solid ingots and sows.</p>
</dd>

<dd class="panel4">
   <h3>Tab 4 Heading</h3>

<p>The volume of liquid sold directly to the downstream will increase each year and is anticipated to reach 200,000 tonnes in the year 2016, increasing In-Country Value. The long-term plan for Sohar Aluminium is to supply 60% of its production in hot metal form to its downstream partners while the rest will be exported in the form of solid ingots and sows.</p>
</dd>

</dl>

Answer 2

You can try this:

(function($) {
var allPanels = $('.accordion > dd').hide();
    $('.accordion > dd:first-of-type').show();
    $('.accordion > dt:first-of-type').addClass('accordion-active');
  jQuery('.accordion > dt').on('click', function() {
      $this = $(this);
  $target = $this.next(); 
  if(!$this.hasClass('accordion-active')){
      $this.parent().children('dd').slideUp();

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.addClass('accordion-active');
      $target.addClass('active').slideDown();
  } else {

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.parent().children('dd').slideUp();
  }
return false;
  });
})(jQuery);

This code opens and collapses the accordion. DeMO

Other wise you can use the jQueryUI Accordion plugin.

Answer 3

If using the jQuery UI accordion, simply set the collapsible option to true on init, like

$(document).ready(function(){
    $('.accordion').accordion({collapsible:true});
});

If not using the jQuery UI accordion, maybe you should be ;)

See it in action in this fiddle

See the docs here

Answer 4

You check if element has class accordition-active, so add the else part.

  if(!$this.hasClass('accordion-active')){
      $this.parent().children('dd').slideUp();

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.addClass('accordion-active');
      $target.addClass('active').slideDown();
  } else {

      $this.removeClass('accordition-active');
      $this.parent().children('dd').slideUp();
  }

http://jsfiddle.net/h28n5aw5/