Espandere/comprimere il contenuto di un blocco in Joomla 3

Immagine da Joomla

Qualche tempo fa ho pubblicato un articolo dedicato a come creare una sezione espandi/nascondi in una pagina Joomla sfruttando MooTools. Joomla 3.x, come noto, carica automaticamente jQuery un framework JS differente, ed utilizza in modo nativo Bootstrap.

Quell'articolo si applica alla versione Joomla 2.5 e richiede di caricare lo script nell'articolo. Sfruttando i già citati jQuery e Bootstrap si può creare lo stesso effetto in Joomla 3.x, arricchendo il sistema con l'aggiunta di una freccia che ricorda lo stato della sezione visibile o meno ed evitando il caricamento di altri script. Si fa di più con meno!

È davvero semplice. Creiamo anzitutto la parte html, composta dal blocco su cui si fa clic per espandere/comprimere ed il blocco espanso/compresso:

	<a href="#" id="titolo"><i class='icon-chevron-right' id='icona'></i> Clic per espandere</a>
	<div id="contenuto">
		Ciao. Io sono il contenuto del blocco.
	</div>

Più chiaro e semplice di così è difficile... Ma diamoci un'occhiata ugualmente. Il blocco con id titolo corrisponde ovviamente al link dove posso fare clic per espandere/comprimere, il blocco con id contenuto è la parte visibile o nascosta.

L'unica parte non immediata del codice HTML è forse la riga <i class='icon-chevron-right' id='icona'></i>: si occupa di visualizzare il simbolo della freccia che punta a destra o in basso. Sfrutta le libreria Glyphicons, un set di simboli che è semplice da includere nel proprio sito e garantisce risultati accattivanti con sforzo e risorse di elaborazione minime. Set che fa parte del corredo standard di Bootstrap e quindi di Joomla 3. È già disponibile quando si carica una pagina Joomla: si deve solo usarlo. La tecnica è basilare: si crea un tag i, con classe corrispondente al simbolo desiderato. Bello, ma dove trovo le classi disponibili? Ad esempio a questa pagina. Nel mio esempio utilizzo i simboli individuati dalle classi icon-chevron-right (freccia a destra) e icon-chevron-down (freccia in basso).

Quando il contenuto è nascosto, la freccia è quella destra, altrimenti è quella in basso. Sì lo so che è ovvio ...

Passiamo alla parte jQuery, che è appena più complessa:

	<script>
		jQuery(document).ready(function() {
			jQuery("#contenuto").hide();
				
			jQuery("#titolo").click(function() {
				jQuery("#contenuto").slideToggle('fast', function() {
					jQuery("#icona").toggleClass('icon-chevron-down icon-chevron-right');
				});
			});
		});
	</script>

Brevemente: al caricamento della pagina jQuery nasconde la parte contenuto con jQuery("#contenuto").hide();; quindi intercetta l'evento clic sull'elemento con id titolo e richiama la funzione slideToggle, che visualizza o nasconde l'elemento individuato dal selettore indicato. La funzione accetta due parametri, il secondo è una funzione callback che viene eseguita al verificarsi dell'evento, il primo è la durata dell'effetto con sui si alterna la vista del contenuto. La funzione callback fa solo una cosa: alterna tra le due classi passate come parametro sul selettore indicato. In parole povere, se la classe è icon-chevron-right la trasforma in icon-chevron-down, ottenendo l'effetto desiderato.

Nota finale:Questo esempio è stato testato su un'installazione pulita di Joomla 3.5.1.