web-dev-qa-db-fra.com

jQuery Accordion - ouvre une section spécifique au chargement de la page

J'ai une implémentation assez basique d'un Accordéon jQuery sur une page (avec 1.3.2, jQuery UI Core 1.72 et jQuery UI Accordion 1.7.2), et je souhaite ouvrir la 2e section lors du chargement de la page. J'ai essayé de nombreuses méthodes mais rien ne semble fonctionner ... 

TETE SCRIPT:

<script type="text/javascript"> $(function() {
    $("#accordion").accordion({
        event: "mouseover"
    });

});

ACCORDEON DE CORPS:

<div id="accordion">
<h3><a href="#">Headline 001</a></h3>
<div>
<ul>
     <li><a href="#1">Link 001</a></li>
     <li><a href="#2">Link 002</a></li>
     </ul>
</div>
<h3><a href="#">Headline 002</a></h3>
<div>
     <ul>
    <li><a href="#3">Link 003</a></li>
     <li><a href="#4">Link 004</a></li>
     </ul>
</div>

Toute aide serait grandement appréciée!

javascriptjqueryaccordion
14
Bomski
$("#accordion").accordion({ active: 2, event: "mouseover" });

Devrait faire le tour!

METTRE &AGRAVE; JOUR

si cela ne fonctionne pas, essayez

$("#accordion").accordion({  event: "mouseover" }).activate(2);

(NB: ceci a été mis à jour pour être un peu plus rapide, merci pour les commentaires. Pour être honnête, cela devrait fonctionner avec le paramètre 'actif: 2', je ne sais pas pourquoi.)

20
Ed James

bonne façon d'ouvrir un onglet spécifique:

$("#accordion").accordion({
    collapsible  : true,
    active       : false,
    heightStyle  : "content",
    navigation   : true
});

Définir l'option:

//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);

ou vous pouvez travailler avec un hash comme ceci:

if(location.hash){

    var tabIndex = parseInt(window.location.hash.substring(1));     
    $("#accordion").accordion('option', 'active' , tabIndex);

}

Votez si vous utilisez;)

Merci

10
Martijn van Hoof

Est-ce que ça marche?

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: 2
    });

});
8
Adhip Gupta

Essayer

$("#accordion").activate(index);
3
Darmen

J'ai résolu cette question un peu différemment depuis que je devais créer un menu.php que nous incluons, j'ai inclus chaque page. Dans notre projet, il y avait 1 accordéon (un élément de menu avec 2 sous-menus). Ainsi, lorsque le visiteur est dans les sous-menus, l'accordéon est ouvert et le lien sélectionné (mis en surbrillance à l'aide de CSS, pas de jQuery) est actif. Mais lorsque le visiteur est sur une autre page, l'accordéon fonctionne normalement.

Voici le javascript:

var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global

accordion.accordion({ //accordion setup on every page
    animated : !containsParams,
    active : containsParams,
    collapsible : true,
    event : "click",
    header : "h2"
});

//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
    if (containsParams) accordion.accordion("activate", 0);
})();

J'espère que vous aimez. =]

Meilleures salutations! =]

1
benqus

Vous devriez écrire active: 1 au lieu de 2, car Accordion indexe les sections à partir de 0 et non à partir de l'une d'entre elles. Le code de travail ressemblera à ça: 

$("#accordion").accordion({ active: 1, event: "mouseover" });

J'espère que ça va aider un peu.

0
swilgosz

Comme d'autres l'ont mentionné, ce qui suit le rendra actif à l'ouverture:

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

C'est active:1 puisqu'il s'agit du deuxième index de l'accordéon {0,1,2,...}; Il semble y avoir une certaine confusion dans les autres réponses car le contenu de l'élément contient le caractère "2" ...

0
THOMAS MANN