Obtenez le style d'accordéon pour les éléments non-accordéon

Question

Je suis complètement nouveau dans les styles CSS de jQuery UI alors s'il vous plaît ours avec moi.

Je dois faire une liste de contacts.

<div id="accordion"> 
    <h3><a href="#">George Foo</a></h3> 
    <div> 
     some information 
    </div> 
    <h3><a href="#">Michelle Bar</a></h3> 
    <div> 
     some information 
    </div> 
    <h3><a href="#">Bill Wind</a></h3> 
    <div> 
     some information 
    </div> 
</div> 

Au début, j'ai pensé utiliser le style accordéon. Cependant, l'utilisation m'a montré que l'ouverture de plus d'un contact pourrait aussi être intéressante. Alors je lis la note au bas de la accordion page utiliser ce lieu de l'accordéon:

From page: 

jQuery(document).ready(function(){ 
$('.accordion .head').click(function() { 
    $(this).next().toggle('slow'); 
    return false; 
}).next().hide(); 
}); 

Mon problème est qu'il ne ressemble pas à l'accordéon (style de lissage). Je suppose que je ne mets pas la accordéon et la tête classe au bon endroit, mais à partir de maintenant les noms ressemblent à des liens par défaut. Comment puis-je avoir le même look pour les en-têtes que l'effet accordéon, sans utiliser d'accordéon? J'ai essayé de chercher autour mais de ce que j'ai trouvé ce problème spécifique n'est pas beaucoup discuté.

Merci.

Answer 1

Que diriez-vous de slideToggle()?

$(document).ready(function() { 
    $("#accordion a").click(function() { 
    $(this).next.slideToggle(); 
    return false; 
    }).next().hide(); 
}); 

Si vous voulez ajouter des styles aux liens qui sont accordionified (est-ce un mot?), Essayer quelque chose comme:

$("#accordion a").each(function() { 
    $(this).addClass('someClass').removeClass('someOtherClass'); 
}); 

Si vous cherchez à découvrir exactement ce que les styles accordéon applique Pour les liens, jetez un oeil à une implémentation sur un autre site, et inspectez les éléments avec Firebug pour voir les classes utilisées, alors vous pouvez lier dans cette feuille de style ..

Answer 2

Si vous voulez juste leur faire avoir le style accordéon, vous pouvez inspecter les classes jQuer L'interface utilisateur ajoute à un accordéon réel, par ex. avec un outil comme Firebug. En fin de compte, il ressemble probablement ceci:

<div id="accordion" class="ui-widget-content padding ui-corner-bottom ui-accordion ui-widget"> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
     <a href="#">George Foo</a> 
    </h3> 
    <div> 
     some information 
    </div> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
     <a href="#">Michelle Bar</a> 
    </h3> 
    <div> 
     some information 
    </div> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
     <a href="#">Bill Wind</a> 
    </h3> 
    <div> 
     some information 
    </div> 
</div> 

Si vous voulez juste changer le comportement par défaut d'un accordéon existant, il pourrait être plus facile d'ajouter vos fonctionnalités il au lieu de reconstruire la chose.