Joomla! - Accordion: expand and collapse content

google-plus Scritto da .

Nella creazione di un sito, a volte si desidera usare gli "accordion" per espandere o comprimere i contenuti visualizzati a schermo...

Cosa è un Accordion

Un "accordion" (fisarmonica in italiano) è un elemento di controllo grafico che comprende un elenco di elementi impilati verticalmente, come etichette o miniature. Ogni elemento può essere "espanso" o "compresso" per rivelare il contenuto associato a quell'elemento. Possono esistere zero elementi espansi, esattamente uno o più di un elemento espanso alla volta, a seconda della configurazione.

Libera traduzione tratta da Accordion (GUI) - Wikipedia (inglese)

Indipendentemente dal perché desideriamo utilizzarlo all'interno del nostro sito web, l'accordion può aiutarci a presentare i contenuti in una forma più ordinata e leggibile per l'utente: il contenuto c'è ma sarà letto solo se l'ospite è interessato a ciò che sta sotto l'etichetta.

E' uno strumento semplice nel suo utilizzo e implementazione ma potentissimo in quanto ci permette di collassare e espandere intere aree di testo complete di immagini/gallerie immagini e/o video.

plugin MooAccordion (Joomla 2.5)

L'estensione gratuita di cui si parla è un plugin di tipo content basato sulle librerie MooTools e compatibile solo con Joomla 1.5 e 2.5 (Non è compatibile con Joomla 3.x) ed è scaricabile da qui: MooAccordion.

Una volta installato e attivato, il plugin MooAccordion permette attraverso una semplicissima sintassi di espandere e/o collassare (e/o perché si può decidere addiritura se una volta espanso si può nuovamente collassare o no) il contenuto del nostro articolo sfruttando così ogni spazio che ci mette a disposizione lo schermo!

La sua sintassi infatti, è davvero semplice da usare e tra l'altro finora non ha mai creato conflitto nemmeno in siti dove si è fatto un largo uso di javascript, tra animazioni e gallerie di immagini.
Per utilizzarlo basterà inserire questo codice all'interno dell'articolo:

{mooblock=Titolo Trigger (titolo per azionare lo slide)}
            Contenuto del blocco da espandere...
{/mooblock}

Ma non è tutto: Infatti si può decidere di aggiungere stile al testo/pulsante trigger. In questo tutorial, é spiegato e addirittura suggerito il codice CSS da inserire nel vostro sito per poter aggiungere dei "pulsanti" al titolo del vostro contenuto espandibile, così come vedete in questo stesso articolo.

Suggerisco comunque di inserire all'interno del file override.css o custom.css del vostro template le classi CSS che andrete a utilizzare per modificare i vostri blocchi di testo espandibili.

Per poterlo fare, andate su Gestione Template -> Template -> vostro_template Dettagli e file -> custom.css (o override.css)
(In alcuni template è necessario accedere in Gestione Template -> Stile -> vostro_stile e abilitare l'uso del file di override)

In fondo al file aggiungete le direttive e i selettori per modificare il layout del vostro MooAccordion.

Potrebbe interessarvi questa lettura:

Joomla! - Personalizzare il Template: CSS

accordion plugin per Joomla 3.x

Se gestite siti realizzti con il CMS Joomla 3 vi consiglio di visionare quest'altro plugin gratuito: Accordion Plant Light plugin (attualmente il plugin sembra essere stato sospeso dalla JED). Il plugin altrettanto piacevole e semplice da usare, si basa sulle librerie jQuery invece che sulle librerie MooTools (per Joomla 3.x sono deprecated e quindi non compatibili).

In alternativa al plugin sopraccitato vi è anche Sliders di Regular Labs che permette con altrettanta semplicità di creare nella stessa maniera degli accordion all'interno dei contenuti di Joomla!.

plugin Sliders di Regular Labs

Per poterlo vedere funzionare sul vostro sito web, vi sarà sufficiente scaricarlo dal sito dello sviluppatore (link sopra riportato) e successivamente installarlo da Estensioni > Gestione > Installa > Installa da file - pacchetto compresso avendo cura di selezionare il file appena scaricato dal sito di Regular Labs.

In alternativa se avete a disposizione l'opzione Installa da web, cercate la keyword "sliders". Una volta comparso nell'elenco il plugin, cliccate sul pulsante "Install..." corrispondente.

plugin sliders - installa da web

Una volta visualizzato il messaggio di installazione avvenuta con successo, i plugin (il plugin slider e il plugin pulsante aggiuntivo nell'editor di testo di Joomla! per l'inserimento guidato) sono già attivi e pronti all'uso.

plugin sliders installato

Per poterli utilizzare, recatevi al contenuto dove volete inserire il vostro accordion (articolo, modulo di tipo HTML personalizzato, etc.) e posizionandovi nella posizione dove volete inserire l'accordion, cliccate sul pulsante "Sliders" sotto il vostro editor di testo.

Inserite un titolo per ogni tab per il numero di etichette espandibili vogliate creare. Confermate cliccando sul pulsante "Inserisci" in alto a sinistra.

editor plugin sliders

Il risultato sarà simile a questo:


{slider Slider Title 1}

testo 1...

{slider Slider Title 2}

testo 2...

{/ sliders}

Modificate il testo vogliate che appaia dentro le varie sezioni degli slider e infine salvate il contenuto.

Ora vi basterà visualizzarlo lato frontend per vederne il risultato.

Ovviamente anche questo plugin consente personalizzazioni: se fate caso all'interno dell'editor Sliders, vi è la possibilità per ogni slider di aggiungere una classe CSS che andrebbe ad influire direttamente du di esso. 

Alternative all'uso degli accordion

Simile all'accordion, ma sviluppato in orizzontale, vi sono le tabs. Sempre di Regular Labs, vi è il plugin Tabs: la sua gestione ed installazione è pressoché identiva a quanto visto per il plugin "gemello" Sliders.

Segnalo anche la possibilità di utilizzare JCE MediaBox Popups in modo tale da avere una lightbox che si apra sopra alla nostra pagina principale con all'iterno il contenuto da noi desiderato.


 

Se hai gradito l'articolo, condividilo, basta un click:

Aggiungi commento

I commenti lasciati dagli utenti del blog sono sempre soggetti a controllo prima di eventuale pubblicazione. I commenti non considerati adatti per contenuti, spam o forma saranno eliminati e non pubblicati. Leggi i Termini e Condizioni di utilizzo per maggiori informazioni.


Codice di sicurezza
Aggiorna

  • logo teoca
  • materexcel collabora
  • logo flash pulizie
  • revolution srl
  • logo arcotraslochi
  • montaggio mobili trento
  • logo elevatori sito
  • logo prontopro

Prima di andartene...

Perché non rimanere in contatto?

Clicca sul pulsante "Mi piace" qui sotto per rimanere aggiornato su tutti i nuovi contenuti e ricevere notifica degli articoli interessanti che condivido giornalmente sulla Pagina Facebook dedicata al blog.

Puoi anche iscriverti alla newsletter e al nuovo canale YouTube di blog.dangerx82 così da rimanere sempre aggiornato sui nuovi contenuti...

x

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 25/05/2020). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):