Oggi vi presenterò un plugin creato da targetweb.it che vi permetterà di nascondere uno o più elementi della vostra pagina (div o articoli) mettendo al loro posto un bottone che al click mostrerà di nuovo l’elemento.
Per utilizzare il plugin jQuery dovremo andare ad includere la classica libreria jquery e il file jquery.tw-spoiler (download alla fine dell’articolo). Dopo aver fatto tutto questo possiamo andare a scoprire come far funzionare questo plugin.
01. Opzioni e uso
Per richiamarlo ci basterà utilizzare la sintassi .twspoiler come nell’esempio qua sotto
$('div.spoiler').twspoiler();
Inserendo queste poche righe di codicehave tutti i div con classe spoiler saranno nascosti come spiegato qua sopra, le caratteristiche standard che ci troveremo davanti sono le seguenti:
- tipo di animazione show
- velocità dell’animazione 0 secondi (il div viene aperto senza eseguire alcuna animazione)
- value del bottone quando il div è chiuso (spoiler)
- value del bottone quando il div è aperto (chiudi spoiler)
Possiamo personalizzare queste caratteristiche con qualche riga in più di codice:
$('div.spoiler').twspoiler({
speed: 500,
botton_value: "apri lo spoiler",
botton_value_hidden: "chiudi lo spoiler",
effect: "slideDown"
});
Andiamo ad analizzare i cambiamenti apportati nel codice:
è stato aggiunto un parametro speed che andrà ad indicare il tempo che impiegherà lo spoiler per essere completamente visibile, ricordo che se viene omesso questo valore non sarà eseguita l’animazione anche se modifichiamo il valore effect del quale vi parlerò tra paco.
Attraverso botton_value sceglieremo quale sarà il value o testo all’interno del bottone quando il div è ancora chiuso mentre con botton_value_hidden andremo a scegliere il value del bottone quando il div è visibile
L’ultimo parametro effect accetta 3 valore: show, fadeIn, slideDown.
Il primo effetto sarà quello standard che troveremo nel plugin quindi potrà essere omesso, fadeIn fa comparire il div aumentandone poco a poco l’opacità, slideDown invece farà aumentare l’altezza del div fino alla fine di questo.
02. Demo e download
03. Note e Updates
Tw-spoiler è un plugin esclusivo di targetweb, è vietata la copia, anche parziale senza preavviso. E’ possibile usare il plugin liberamente a patto si lascino i commenti di credits al codice.
Per il momento è tutto, questa versione possiamo considerarla una beta quindi continuate a visitare il sito per ulteriori aggiornamenti del codice. Per non perdere nemmeno un plugin o tema di targetweb iscriviti alla pagina facebook o ai nostri feed!
Ottimo lavoro Giacomo =D!
Ciao Giacomo ottima guida ….
volevo chiederti … ma se volessi formattare (tramite css) il button (apri lo spoiler/chiudi lo spoiler) mettendo magari un immagine al posto della scritta, come devo fare?
Ciao Giacomo,
complimenti per la guida e ottimo questo plugin, però ti vorrei chiedere due cose:
1° si può partire con lo spoiler già aperto e poi chiuderlo?
2° se si possono inserire delle immagini al posto del testo?
se mi puoi dare indicazioni anche su come poter fare questa cosa
grazie
@pippo
I putton sono identificati con la classe “.twspoiler-botton” quindi ti basta operare su quella
@Alessandro
per partire con lo spoiler già aperto basta che fai
$(‘classe o id’).twspoiler(
.
.
);
$(‘classe o id’).show();
e si, puoi inserire tutto quello che vuoi all’interno dello spoiler
ok perfetto, per l’inversione dell’effetto.
però non riesco a trovare la classe css del bottone, dove la vado a cercare??
Grazie
Alessandro
Altra informazione posso in qualche modo cambiare la classe ccs quando il bottone è chiuso??
cioè se il bottone è aperto prende la classe ccs x, mentre se lo chiudo prendere la classe ccs y??
grazie
salve si può cambiare in qualche modo lo stato della classe css facendo riferimento a due classi diverse??
grazie