jquery Accordion - comment ouvrir le deuxième onglet par défaut sur la page de chargement

je suis un noob absolu de jquery et javascript, et vraiment je suis juste à l'aide d'un simple code que j'ai trouvé en ligne.
Cela crée un accordéon liste, mais j'aimerais ouvrir le deuxième onglet (ou un onglet autre que le premier) sur la page de chargement.
Ensuite, lorsque vous cliquez sur un autre onglet, l'onglet ouvert par défaut doit être fermé.

C'est le code que j'utilise:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>

<style>
    .accord-content { display: none; }
</style>
</head>

<body>
    <div class="accordion">
    <div class="accord-header">Header 1</div>
    <div class="accord-content">This is the content for the first header.</div>
    <div class="accord-header">Header 2</div>
    <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>

</body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".accordion .accord-header").click(function() {
    if($(this).next("div").is(":visible")){
    $(this).next("div").slideUp("slow");
    } else {
    $(".accordion .accord-content").slideUp("slow");
    $(this).next("div").slideToggle("slow");
    }
    });
    });
    </script>
</html>

Comment puis-je y parvenir?
Le plus simple, le mieux.

Merci yo tout le monde à l'avance.

OriginalL'auteur Jackpot | 2013-09-20

  1. 8

    Vous pouvez utiliser le .trigger() pour simuler un clic sur l'onglet désiré.
    C'est un travail de violon.

    Sur votre jquery, avant la fin du document.prêt :

    $(".accordion .accord-header:eq(1)").trigger('click');

    De sorte que votre finale JS :

    $(document).ready(function() {
    $(".accordion .accord-header").click(function() {
        if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
        } else {
            $(".accordion .accord-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
        }
    });
    $(".accordion .accord-header:eq(1)").trigger('click');
});
    Je vous remercie beaucoup. Comment faire si j'ai besoin d'insérer une autre option dans l'accordéon (en-Tête 3, 4, 5, etc.)?
    Salut, vous pouvez simplement ajouter le code html =) regardez cette mise à jour de violon : jsfiddle.net/ngGqA/7

    OriginalL'auteur Guillaume Lehezee

  2. 15

    Une façon plus élégante:

    $( ".selector" ).accordion({ active: 1 });

    Gardez à l'esprit que la propriété active est égale à zéro-indexé. 0 représente le premier onglet. 1 représente le deuxième.

    JQuery doc est excellent

    Suivant cette ligne de pensée, il vous suffit d'ajouter "data-slide=1" à l'élément html et de faire quelque chose comme ceci: $(".sélecteur").each( function(i,item) { $(this).accordéon({ actif: parseInt($(this).attr('data-slide'),10) }); });
    Quelle est la syntaxe pour quand vous avez collapsible: true?
    pourquoi diable voudriez-vous faire cela. Regardez comment horrible votre code d'exemple est.

    OriginalL'auteur surfer190