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.