Настроить аккордеон 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')

полного Fiddle: 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> 

And The 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/