Affichage des articles dont le libellé est accordeon. Afficher tous les articles
Affichage des articles dont le libellé est accordeon. Afficher tous les articles

jeudi 13 septembre 2012

Accordéon simpliste

L'idée est de créer un accordéon simpliste pour afficher des infos uniquement lorsque l'utilisateur sélectionne un élément.

avec un html très simple :

<div class="toggler">
Je suis un déclencheur
</div>
<div class="element">
   je suis le contenu
</div>

Et une fonction jquery tout aussi simple.

function initToggler()
{
    $(document).on('click','.toggler', function(){
        var $this = $(this);
        $this.addClass('open').next('.element').slideDown();
    });
    $(document).on('click','.open.toggler', function(){
        var $this = $(this);
        $this.removeClass('open').next('.element').slideUp();
    });
}
$(initToggler);​

Le jsfiddle pour tester :
http://jsfiddle.net/powerMugen/Fj9HU/


Et voilà c'est tout pour aujourd'hui.