tinyAccordion accordéon multi-niveaux

tb_tinyVous avez peut être déjà eu besoin de créer un menu avec beaucoup de données et donc de niveaux. TinyAccordion est un script Javascript indépendant permettant de créer des accordéons avec support des multi-niveaux.
Voici un script qui ne requiert aucune librairie javascript (Pas de mootools ni de jQuery), il est donc directement prêt à emploi.

Avec seulement 1,4Ko, le script permettra de gérer des accordéons multi-niveau (imbriqués les uns dans d’autres).
tinyaccordions
Il vous suffit d’inclure le script à votre page et de déclarer dans le head :

// Déclaration de l’ principal
var parentAccordion=new TINY.accordion.slider(« parentAccordion »);
parentAccordion.init(« acc », »h3″,false,0);

// Déclaration de l’accordéon imbriqué
var nestedAccordion=new TINY.accordion.slider(« nestedAccordion »);
nestedAccordion.init(« nested », »h3″,true,1, »acc-selected »);

et dans le body:

<ul class= »acc » id= »acc »>
<li>
<h3>About</h3>
<div class= »acc-section »>
<div class= »acc-content »>
<ul class= »acc » id= »nested »>
<li>
<h3>Sous Cat 1</h3>

<div class= »acc-section »>
<div class= »acc-content »>
Donec elementum lobortis lorem, consectetur adipiscing elit.
</div>
</div>
</li>
<li>
<h3>Sous Cat 2</h3>
<div class= »acc-section »>

<div class= »acc-content »>
Vestibulum blandit mauris elementum mauris.
</div>
</div>
</li>

</ul>
Texte de la premiere partie
</div>
</div>
</li><li>

<h3>Instructions</h3>
<div class= »acc-section »>
<div class= »acc-content »>
Texte de la deuxieme partie
</div>
</div>
</li>
</ul>

Ce script est bien sur plus destiné à ceux qui n’ont pas l’utilité d’utiliser un framework javascript comme Mootools ou l’excellent jQuery.

Démonstration
Site officiel tinyAccordion

A voir aussi

  • No Related Post
  • Amigafreak

    Bonjour, j’ai essayé tinyaccordion, excellent ! Mais…
    j’ai voulu rajouter des sous-onglets dans l’onglet « instructions » pour faire des test. Suite à cette manip’, seuls les onglets principaux sont clickables ??? les sous-onglets de « about » sont fermés et ceux de « instructions » sont tous ouverts.

    Que dois-je changer dans les différents fichiers nécessaire ?

    Merci d’avance,
    p.s. j’ai déjà posté un message sur le site officiel, mais je n’ai pas eu de réponse ;-(

  • http://www.webnpaper.com stefi

    Bonjour, j’ai exactement la même question que Amigafreak.
    Y a-t-il une solution ou un forum pour discuter de la configuration de TinyAccordion?
    Merci d’avance

  • http://www.popcorn-design.fr Amigafreak

    Salut Stefi, j’ai résolu le problème, mais comme c’était au mois de juin, je ne sais plus comment.

    Je l’ai utilisé sur le site de Insudiet.fraides et faq. jette un oeil sur le code, histoire de voir si ça peut t’aider.

    Bon courage !

    Amigafreak ;-)

  • http://www.webnpaper.com stefi

    Un peu que ça m’aide! J’y suis arrivé en scrutant ton code et enfin compris ce que signifiait « to initialize a new accordion… ».

    Merci du coup de pouce et de ta réponse rapide :-)

  • http://www.webnpaper.com stefi

    Quand même un gros bug sous Firefox PC uniquement:
    Dans mes DIV de l’accordion, c’est des OBJECT (code copié de YouTube) et Firefox affiche tous les contenu les uns par-dessus les autres bien que les niveaux soient collapsés.

    Je vais faire de recherches mais si tu connais un forum bien actif sur ces questions, info bienvenue.

    Merci, Stéphane

Réseau

Sites