調整jQuery手風琴 - 打開所有標籤

Question

我用jQuery開發了一個非常基本的手風琴。

我希望允許所有手風琴隨時開啓。

我還想要文字說open & close取決於它們是否打開/關閉。

HTML：

<div id="accordion"> 
    <h4 class="accordion-toggle">Accordion 1</h4> 
    <div class="accordion-content default"> 
     <p>Cras malesuada ultrices augue molestie risus.</p> 
    </div> 
    <h4 class="accordion-toggle">Accordion 2</h4> 
    <div class="accordion-content"> 
     <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
    </div> 
    <h4 class="accordion-toggle">Accordion 3</h4> 
    <div class="accordion-content"> 
     <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
    </div> 
</div> 

CSS：

.accordion-toggle {cursor: pointer; margin: 0;} 
.accordion-content {display: none;} 
.accordion-content.default {display: block;} 

的Javascript：

$(document).ready(function($) { 
    $('#accordion').find('.accordion-toggle').click(function(){ 

     //Expand or collapse this panel 
     $(this).next().slideToggle('fast'); 

     //Hide the other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

    }); 
}); 

http://jsfiddle.net/zbjv3cak/

Answer 1

爲了讓所有的手風琴板來一次打開，只需刪除此行，因爲它摺疊了其他面板。

// Hide the other panels 
$(".accordion-content").not($(this).next()).slideUp('fast'); 

要顯示每個面板的開/關狀態，你可以使用jQuery的.is()

$(this).next().slideToggle('fast', function(){ 
    var status = $(this).is(':hidden') ? 'close' : 'open'; 
    $(this).next('.accordion-status').html(status); 
}); 

添加運行顯示或隱藏在面板之後的回調函數，並測試其新的可見性請注意，您需要添加一個元素來顯示每個面板此狀態（在這個例子中，DIV與'accordion-status'類）

全小提琴：http://jsfiddle.net/67w3pa89/

Answer 2

在這裏，你是先生：

<a href="#" class="open">Open All</a> 
    <a href="#" class="close">Close All</a> 
    <div id="status"></div> 
    <div id="accordion"> 
     <h4 class="accordion-toggle">Accordion 1</h4> 
     <div class="accordion-content default"> 
      <p>Cras malesuada ultrices augue molestie risus.</p> 
     </div> 
     <h4 class="accordion-toggle">Accordion 2</h4> 
     <div class="accordion-content"> 
      <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
     </div> 
     <h4 class="accordion-toggle">Accordion 3</h4> 
     <div class="accordion-content"> 
      <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
     </div> 
    </div> 

和JS：

$(document).ready(function($) { 
     $('.accordion-toggle').click(function(){ 

      //Expand or collapse this panel 
      $(this).next().slideToggle('fast'); 

      //Hide the other panels 
      $(".accordion-content").not($(this).next()).slideUp('fast'); 
     }); 

     $(".open").click(function(e){ 
     e.preventDefault(); 
     $('.accordion-toggle').next().slideDown('fast'); 
     $("#status").text("Opened"); 
     }); 

     $(".close").click(function(e){ 
     e.preventDefault(); 
     $('.accordion-toggle').next().slideUp('fast'); 
     $("#status").text("Closed"); 
     }); 
    }); 

http://jsfiddle.net/zbjv3cak/1/