Pulsante toggle con jQuery in una pagina con elementi ripetuti

Pubblicato ven 02 ago 2013 by
Pulsante toggle con jQuery in una pagina con elementi ripetuti

jQuery può aiutarci a dare un aspetto più accattivante e interattivo al nostro sito web, io personalmente lo uso molto volentieri abbinato a php, e una cosa che al momento può sembrare scontata, ma cercando sui vari forum e blog ho scoperto che per i neofiti della programmazione non è così banale, è quello di mostrare un elemento nascosto al click di un link o un pulsante adiacente su elementi ripetuti più volte. Se per esempio abbiamo una pagina generata da php, magari composta da 10 record e ad ognuno di questi corrisponde un pulsante "mostra/nascondi" con assegnata un a classe:  class="interruttore" e un div adiacente con una classe: class="scorrevole" come facciamo a dire a jquery di non applicare l'effetto ad ogni classe "scorrevole" presente nella pagina? Semplice, basta usare le parole chiave this e next, ma vediamo in pratica come impostare lo script.

Prima di tutto nel nostro documento html dovremo richiamare il css, il framework jQuery e il nosto file javascript:

<link rel="stylesheet" href="stile.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="toggle.js"></script>

Poi tra i tag <body> </body> andremo ad inserire gli elementi della pagina:

<body>
    <h3>Esercizio jQuery, pulsante on off corrispondente al link selezionato.</h3>
    <br />
    <span class="interruttore"><a href="#">Aziona 1!</a></span>
    <div class="scorrevole"><p>1 - Testo nascosto di default ma visibile premendo il link precedente</p></div>
    <span class="interruttore"><a href="#">Aziona 2!</a></span>
    <div class="scorrevole"><p>2 - Testo nascosto di default ma visibile premendo il link precedente</p></div>
</body>

Il file html è pronto, praticamente ad ogni div nascosto corrisponde un link che ci permetterà di mostrare o nascondere il testo ad ogni click, ora andiamo a editare il css stile.css per far si che il div e il contenuto con la classe "scorrevole" siano nascosti già al caricamento della pagina:

span.interruttore {
	display: block;
}
.scorrevole {
	display: none;
}

Ecco, ora non ci rimane che dire a jQuery di mostrare o nascondere il testo corrispondente al link cliccato scrivendo il codice nel file toggle.js

$(document).ready(function(){
//Al click del link .interruttore
$('.interruttore').click(function(){   
  //seleziona l'elemento che trovi dopo il link cliccato e mostra o nascondi
  $(this).next().toggle();
        //ferma lo script per evitare il reload della pagina
	return false;
});
});

Questo è tutto, potete trovare la dimostrazione a questo Link

Come dicevo all'inizio di questo articolo può sembrare scontato ai più ma per molti neofiti non lo è, e la dimostrazione è il fatto che su internet ho trovato spesso queste domande, spero di aver fatto cosa gradita a chi si trovasse davanti a questo quesito. Un saluto e alla prossima!

comments powered by Disqus