Сделать аккордеон Close on second click JQUERY

Question

Я сделал JQUERY Аккордеоны, которые отлично работают.

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; 
    }); 

});

Что бы я хотел, это когда пользователь нажимает на аккордеон, чтобы открыть его, а затем щелкнул по нему второй раз, когда он закроется.

Итак, 1-й клик = открытый, 2 клика = закрыть.

Как бы я это сделал?

Благодаря

Answer 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> 

slideToggle() Используйте для переключения между slideUp и 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

Answer 2

T чень это:

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

$('#accordion .title span:last').click(function() { 
    $('#accordion .hide').slideUp(); 
}); 

Fiddle Demo