Blogger, Bootstrap, Anartisis: Collapse (Testo che si chiude e si espande on click)

Prima di vedere come personalizzare la funzione Collapse su Boostratp mi preme
ricordare che esiste un semplice tag di html5 che fa la stessa cosa e puoi
vedere un tutorila qui:

• Tutorial: Testo a soffietto (accordion) con HTML5, una soluzione
  semplice e funzionale.

Se invece vuoi proprio vedere come fare con Boostrap e anche tu ti sei chiesto
come posso usare la funzione di Collapse di Boostrap 4.3 presente nel Tema
Anartisis in modo un po’ più elegante di come viene proposta nella
documentazione di Bootstrap stessa (qui) in questo articolo troverai alcune soluzioni efficaci per usare un
semplice link invece di un pulsante per allargare, espandere del testo.

Introduzione al Collapse di Bootstrap 4.3

Il componente Collapse di Bootstrap è uno strumento potente
per creare contenuti espandibili nei tuoi articoli. Particolarmente utile per
blog su piattaforme come Blogger, permette di nascondere sezioni di testo
lunghe, migliorando la leggibilità e l’esperienza utente.

Vedremo come implementare il Collapse in modo efficace sul tema
Anartisis di Blogger, sfruttando le risorse già caricate nel
tema.

Codice Base di Bootstrap 4.3

Ecco il codice standard fornito dalla documentazione ufficiale di Bootstrap
4.3:

</p> <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><br /> Link with href<br /> </a><br /> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><br /> Button with data-target<br /> </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> <p>

Versione Ottimizzata per Blog: Solo Link

Nei post di blog, spesso è preferibile usare un semplice link testuale invece
di un bottone vistoso. Ecco la versione semplificata:

</p> <p> <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><br /> Clicca per espandere<br /> </a> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> Contenuto collassabile qui. </div> </div> <p>

Elementi Chiave del Codice

• data-toggle="collapse" → Attiva il comportamento di
  espansione/chiusura
• href="#collapseExample" → Collega il link all’elemento da
  espandere tramite ID
• aria-expanded="false" → Indica lo stato iniziale (chiuso) per
  l’accessibilità
• aria-controls="collapseExample" → Migliora l’accessibilità per
  screen reader

Aggiungere Icone con Font Awesome

Nota bene che il tema Anartisis carica già
Font Awesome 4.7.0. e possiamo sfruttarlo per rendere il link
più intuitivo con un’icona visiva.

Opzione 1: Icona Triangolo (Consigliata)

</p> <p> <a data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1"><br /> <i class="fa fa-caret-down"></i> Clicca per espandere il contenuto<br /> </a> </p> <div class="collapse" id="collapseExample1"> <div class="card card-body"> Qui puoi inserire testo lungo, codice, esempi o qualsiasi contenuto che vuoi nascondere inizialmente. </div> </div> <p>

Opzione 2: Icona Documento

</p> <p> <a data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2"><br /> <i class="fa fa-file-text-o"></i> Leggi la documentazione completa<br /> </a> </p> <div class="collapse" id="collapseExample2"> <div class="card card-body"> Documentazione dettagliata o contenuto supplementare. </div> </div> <p>

Opzione 3: Triangolo Animato (Versione Professionale)

Questa versione fa ruotare l’icona quando il contenuto si espande, offrendo un
feedback visivo immediato all’utente:

</p> <style> .collapse-link .fa { transition: transform 0.3s ease; } .collapse-link[aria-expanded="true"] .fa { transform: rotate(180deg); } </style> <p> <a class="collapse-link" data-toggle="collapse" href="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3"><br /> <i class="fa fa-caret-down"></i> Clicca per espandere<br /> </a> </p> <div class="collapse" id="collapseExample3"> <div class="card card-body"> Il triangolo ruota automaticamente quando espandi o chiudi questa sezione! </div> </div> <p>

Personalmente io a volte racchiudo tutto il codice Collapse con il div con lo
stile “card card-body”

<div class=”card card-body”>

ma è una questione di gusto grafico di impaginazione. Valuta questa modifica,
in questo caso basta che sposti questo div all’inizio del codice del Collapse.

Altre Icone Disponibili in Font Awesome 4.7.0

Puoi sperimentare con diverse icone per adattare lo stile al tuo blog:

• fa fa-chevron-down → Freccia sottile verso il basso
• fa fa-angle-down → Angolo semplice
• fa fa-plus-square-o → Quadrato con simbolo più
• fa fa-file-o → Icona documento vuoto
• fa fa-arrow-circle-down → Freccia circolare

Consigli per l’Uso nei Post di Blog

1. ID Univoci

Se usi più collapse nello stesso articolo, assicurati che ogni sezione
abbia un ID univoco:

<br /> <!-- Primo collapse --><br /> <a data-toggle="collapse" href="#sezione1">…</a></p> <div class="collapse" id="sezione1">…</div> <p><!-- Secondo collapse --><br /> <a data-toggle="collapse" href="#sezione2">…</a></p> <div class="collapse" id="sezione2">…</div> <p>

2. Usa Testo Descrittivo

Invece di “Clicca qui”, usa descrizioni chiare come:

• “Leggi l’esempio completo”
• “Mostra il codice sorgente”
• “Espandi per vedere i dettagli”

3. Personalizza lo Stile

Puoi modificare l’aspetto della card per adattarla al tuo tema:

</p> <div class="collapse" id="collapseCustom"> <div class="card card-body" style="background-color: #f8f9fa; border-left: 4px solid #007bff;"> Contenuto con stile personalizzato </div> </div> <p>

Esempio Pratico: Nascondere Codice Lungo

Un caso d’uso perfetto per i blog tecnici è nascondere blocchi di codice
lunghi:

</p> <p> <a class="collapse-link" data-toggle="collapse" href="#codiceCompleto" aria-expanded="false" aria-controls="codiceCompleto"><br /> <i class="fa fa-code"></i> Mostra codice completo<br /> </a> </p> <div class="collapse" id="codiceCompleto"> <div class="card card-body"> <pre><code> // Il tuo codice lungo qui function esempio() { console.log("Codice nascosto inizialmente"); } </code></pre> </p></div> </div> <p>

Verifiche di Compatibilità

Il tema Anartisis carica queste risorse essenziali per far funzionare il
Collapse:

• Bootstrap 4.6.0 → Fornisce il componente Collapse
• jQuery 2.2.4 → Necessario per l’interattività
• Font Awesome 4.7.0 → Per le icone

Assicurati che queste librerie siano caricate nell’<head>
del tuo tema (come nel tema Anartisis) prima di usare il Collapse.

Conclusione

Il componente Collapse di Bootstrap è uno strumento versatile per migliorare
la leggibilità dei tuoi articoli su Blogger. Con l’aggiunta di icone Font
Awesome e qualche personalizzazione, puoi creare un’esperienza utente
professionale e intuitiva.

Vantaggi principali:

• Riduce la lunghezza visiva degli articoli
• Migliora la navigazione per l’utente
• Nasconde contenuti tecnici o secondari
• Mantiene il focus sul contenuto principale

Sperimenta con le diverse opzioni e trova lo stile che meglio si adatta al tuo
blog!

Vedi anche sull’argomento.

• Tutorial: Testo a soffietto (accordion) con HTML5, una soluzione
  semplice e funzionale.