Semplice accordion con jQuery

In questa "pillola" vedremo come costruire elementi a comparsa con effetto accordion con la libreria jQuery: al click del mouse sull'intestazione dell'elemento vengono mostrati/nascosti i relativi contenuti.

A seguire la demo, pubblicata su CodePen, in cui è possibile anche apportare modifiche personalizzate al codice e visualizzarle in tempo reale.

See the Pen Simple accordion by MAeSI (@maesi) on CodePen.

La struttura del codice HTML è molto semplice: un div contenitore div id="content" racchiude la sequenza dei div intestazione div class="s_toggle" e dei relativi contenuti div class="nascosto", nascosti grazie alla regola CSS display:none

La funzione javascript, che utilizza la libreria jQuery, controlla l'accordion: al click sull'intestazione, se il relativo contenuto è visibile, viene nascosto

if ( $(this).next().is(":visible")){
$(this).next().hide('slow');
}

altrimenti viene nascosto il contenuto in quel momento visibile e viene mostrato il contenuto associato all'intestazione

else{
$('div.nascosto:visible').hide('slow');
$(this).next().show('slow');
}