Joomla! - Expand Collapse Content

google-plus Scritto da . Postato in Joomla!

Nella creazione di un sito, a volte si desidera restringere gli spazi o limitarli alla dimensione dello schermo. Può anche darsi che vogliamo che il testo sia presente (altrimenti Google e gli altri bot cosa indicizzerebbero?) ma che sia leggibile solo e unicamente se l'utente ha il desiderio di farlo.

Una idea potrebbe essere quella di scrivere un'articolo e linkarlo attraverso l'ormai conosciuto JCE MediaBox Popups in modo tale da avere una lightbox che si apra sopra alla nostra pagina principale.

Un'altra idea è quella di utilizzare uno strumento che benché sia semplice nel suo utilizzo e implementazione, è potentissimo in quanto ci permette di collassare e espandere intere aree di testo complete di immagini/gallerie immagini e/o video.

L'estensione è gratuita (un altro punto di forza) 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.
Su questo sito, basato sulla versione Joomla 3, non è infatti attivato ne funzionante. La demo la potrete vedere direttamente dal sito del creatore del plugin.

Se come me, gestite siti in Joomla 3, vi consiglio di visionare quest'altro plugin gratuito: Accordion Plant Light plugin. 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).

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 tigger. 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

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

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

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. La nostra Privacy Policy è cambiata: Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy: