jQuery UI accordéon activer

Question

Je ne comprends pas comment faire cela, ou si je peux le faire. J'ai un accordéon d'interface utilisateur jQuery, plusieurs sections avec chaque section contenant plusieurs balises d'ancrage chacune avec un identifiant de chaîne unique.

J'aimerais pouvoir ouvrir l'accordéon là où se trouve un élément particulier avec un identifiant donné. Comme dire id "item117". Puis-je utiliser quelque chose comme

$('#accordion').activate('activate','#item117'); 

ou même

$('#accordion').activate('activate',117); 

J'ai essayé ces et quelques variations mais ne peut pas l'obtenir à partir. Dans le cas où j'essayais de travailler, l'accordéon aurait dû s'ouvrir à la fin de la deuxième section. Je ne reçois toujours pas cela, alors peut-être que je fais quelque chose d'autre aussi bien. Je l'ai dépouillé à une page d'exemple ici: http://www.ofthejungle.com/testaccordion.php S'il vous plaît jeter un oeil à elle et sa source.

Answer 1

Essayez

$('#accordion').activate('#item117'); 

ou

$('#accordion').activate(document.getElementById('item117')); 

La syntaxe correcte pour l'activation d'un accordéon est

$(".selector").activate(var index) 

où l'index est une chaîne, élément, booléen, Nombre, JQuery

Answer 2

Vous devez l'appeler en utilisant la fonction appelée accordion:

// Open the third set (zero based index) 
$('#accordion').accordion('activate', 2); 

Pour ouvrir une section contenant un élément spécifique, vous feriez quelque chose comme ça. Remarque: vous devez cibler le déclencheur qui ouvre et ferme normalement la section. Dans les documents, il s'agit d'un élément h3, votre élément déclencheur peut être différent, alors modifiez-le en conséquence.

$('#accordion').accordion('activate', '#accordion > div:has(#item117) > h3'); 

Answer 3

J'ai eu le même problème avec l'activation d'un accordéon aveC#id. Malheureusement, je n'avais pas trouvé de solution, alors j'ai créé un hack. Je passe en revue div éléments dans mon accordéon afin d'obtenir l'indice intéressant div. Il ressemble à ceci:

acc = 'tab-you-are-interested-in'; 

// find corresponding accordion 
act = 0; 
panels = $('#accordion-element > div'); 
for (i=0; i<panels.length; i++) { 
    if (panels[i].id == acc) { 
     act = i; 
    } 
} 

$('#accordion-element').accordion('activate', act); 

Answer 4

Cette ENFIN a fonctionné pour moi:

$("#accordion").accordion("activate", $("#h3-id")); 

NOTE !!! L'identifiant doit être celui de l'élément <h3> que vous voulez ouvrir (dans la configuration d'accordéon par défaut).

Answer 5

pour moi a travaillé

$("#accordion").accordion({active:"h3:last"}) 

Answer 6

Vous pouvez également activer et désactiver l'accordéon comme ceci:

// Add the class ui-state-disabled to the headers that you want disabled 
$(".whatyouwantdisabled").addClass("ui-state-disabled"); 

Pour réactiver l'onglet:

// Remove the class ui-state-disabled to the headers that you want to enable 
$(".whatyouwantenabled").removeClass("ui-state-disabled"); 

Answer 7

ont été au cours de cette trop & trouvé une solution agréable et universelle
- Emuler cliquant l'en-tête de l'élément requis par son id

$('#header-of-item-258').click(); 

qui fonctionne à chaque fois et partout non seulement accordéon

Answer 8

Lorsque vous cliquez sur en-tête, il est un élément h3 et il ouvre la prochaine div..that est la fonctionnalité. Maintenant, pour activer, vous devez fournir l'index ou l'élément. l'index peut être différent de votre identifiant. donc je voudrais utiliser:

$('.selector').accordion('option', 'activate', $(h3#id)); 

Si vous avez index, vous pouvez utiliser that..But la plupart des cas, si vous avez créé l'accordéon dynamique, il est facile d'obtenir l'index d'un identifiant. Vous pouvez trouver des indices comme ça ..

var processingHeaders = $('#accordion h3'); 
for (i = 0; i < processingHeaders.length; i++) { 

     ids.push($(processingHeaders[i]).attr('id')); 
     idsForLaterChecks.push($(processingHeaders[i]).attr('id')); 
    } 

maintenant je suis ids .. utilisant indexOf: trouver l'index dans le tableau et l'utiliser ..

Note: // idsForLaterChecks est global

Answer 9

Voici une autre façon.

Inclure un ID = "someId" dans chacune des balises d'en-tête H3 de l'accordéon et nommer l'ID unique.

Par exemple, cette id serait en série 'AccjA' la prochaine h4 serait 'AccjB':

<h4 class="Accj" id="AccjA"> 
     <a href="#settings">A Fan?</a> 
</h4> 

Activez ensuite selon le panneau que vous souhaitez avec:

$('#Accjoin').accordion('activate', '#AccjoinA') 

Je l'ai utilisé ci-dessus sur un délai d'attente pour attirer l'attention de l'utilisateur après que la page est chargée avec un retard de 2 secondes en utilisant la fonction ".doTimeout" de Ben Alman comme:

$.doTimeout(2000, function() { 
    $('#Accjoin').accordion('activate', '#AccjoinA') 
}); 

Answer 10

Whatch the jquery API

Activer le deuxième contenu de l'accordéon contenu dans.

$(".selector").activate(1) 

Fermez toutes les parties de l'accordéon.

$(".selector").activate(false) 

Activer le premier élément correspondant à l'expression donnée.

$(".selector").activate("a:first") 

Answer 11

De la documentation:

// getter 
var active = $(".selector").accordion("option", "active"); 

// setter 
$(".selector").accordion("option", "active", 2); 

Answer 12

Avec jQuery 1.9+ le:

$('#accordion').activate('activate', elementSelector); 

est maintenant:

$('#accordion').activate('option', 'active', elementSelector); 

Si vous trouvez qu'il est plus facile d'utiliser des méthodes qui traversent, si vous avez du HTML comme ceci:

<div id="accordion"> 
    <h3><a href="#">Section</a></h3> 
    <div> 
     <p id="#item117" class="item"> 
      <a class="link-active" href="">Item 117</a> 
     </p>    
    </div> 
</div> 

essayez ceci:

var myh3 = $('#item117').parent().prev('h3'); 
$('#accordion').accordion('option', 'active', myh3); 

Answer 13

$('#collapseOne').collapse('toggle');