fix accordéon (jquery)

Question

HTML

<h2 class="sec-title">one</h2> 
<div class="sec-content">content 1</div> 
<h2 class="sec-title">two</h2> 
<div class="sec-content">content 2</div> 

jQuery:

$('.sec-content').hide(); 
$('.sec-title:first').addClass('active').next().show(); 

$('.sec-title').click(function(){ 
if($(this).next().is(':hidden')) { 
    $('.sec-title').removeClass('active').next().slideUp(); 
    $(this).toggleClass('active').next().slideDown(); 
} 
return false; 
}); 

... fonctionne mais si vous voulez faire la deuxième section d'accordéon actif sur pageload? qu'est-ce que je change?

Merci pour votre aide

Answer 1

Essayez de changer la ligne où vous sélectionnez le premier élément de classe sec-title à ceci:.

$('.sec-title:eq(1)').addClass('active').next().show(); 

Voici le API documentation pour le sélecteur :eq. Je pense que ça va faire ce que tu veux. Il sélectionnera le nième élément correspondant au sélecteur. Rappelez-vous que eq() est basé sur 0 - donc :eq(1) sélectionne le deuxième élément qui a la classe sec-title.

Voilà mon violon qui illustre ceci: http://jsfiddle.net/7KdGn/1/

J'espère que cela aide!

Answer 2

Vous pouvez utiliser (jQuery UI Accordéon] (http://docs.jquery.com/UI/Accordion) au lieu de réinventer la roue. Faites très attention à son option active. Ensuite, votre code deviendra simplifiée aussi simple que

$(document).ready(function() { 
    $("#accordion").accordion({ active: 1 }); 
});​ 

Jetez un coup d'oeil pour un exemple here