在第二次單擊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;
   });

}）;

我想要的是用戶單擊手風琴以將其打開，然后再次單擊將其關閉。

因此，第一點擊=打開，第二點擊=關閉。

我將如何處理？

謝謝

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

小提琴演示

Answer 2

嘗試這個：

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

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

小提琴演示

Answer 3

您可以使用以下解決方案在jQuery的第二次單擊上使手風琴關閉：

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