Make Accordion Close on second click JQUERY

Question

I have made JQUERY Accordions which work fine.

HTML:

<div id="accordion">

<div class="title"><span>Accordian 1</span></div>
<div class="hide">

  <p>hidden content</p>

</div>

<div class="title"><span>Accordian 2</span></div>
<div class="hide">

  <p>hidden content</p>

</div>


<div class="title"><span>Accordian 3</span></div>
<div class="hide">

   <p>hidden content</p>

</div>

<div class="title"><span>Close all the accordions</span></div>

</div>

JQUERY

$(document).ready(function() {

    $('#accordion .hide').hide();
   $('#accordion .title span').click(function(){
           $('#accordion .hide').slideUp();
           $(this).parent().next().slideDown();

           return false;
   });

});

What I would like is when a user clicks an accordion to open it, and then clicks it a second time that it would close.

So 1st click = open, 2 click = close.

How would I go about this?

Thanks

Solution 1

HTML :

<div id="accordion">
<div class="title"><span>Accordian 1</span></div>
<div class="hide">
  <p>hidden content</p>
</div>
<div class="title"><span>Accordian 2</span></div>
<div class="hide">
  <p>hidden content</p>
</div>
<div class="title"><span>Accordian 3</span></div>
<div class="hide">
   <p>hidden content</p>
</div>
<div class="close"><span>Close all the accordions</span></div>
</div>

Use slideToggle() , to toggle between slideUp and slideDown

$(document).ready(function() {    
   $('#accordion .hide').hide();
   $('#accordion .title span').click(function(){
           $(this).parent().next()
                  .slideToggle()
                  .siblings('.hide').slideUp();
           return false;
   });
    $('.close').click(function(){
        $('#accordion .hide').slideUp();
    });
});

Fiddle Demo

Solution 2

You can use the following solution to make the accordion close on the second click in jQuery:

$("#accordion").accordion({
        heightStyle: "content",
        autoHeight: false,
        clearStyle: true,
        collapsible: true, //this makes the selected tab close on second click
});

Comments

[mickzer]

Thanks for your reply, this solution works however it makes the "close all" function not work

[Stanislav Mekhonoshin]

Please provide additional context for your solution. It would be nice to have some explanation.