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>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </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>

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

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>
  <a data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
    <i class="fa fa-caret-down"></i> Clicca per espandere il contenuto
  </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>

Opzione 2: Icona Documento

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

Opzione 3: Triangolo Animato (Versione Professionale)

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

<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">
    <i class="fa fa-caret-down"></i> Clicca per espandere
  </a>
</p>
<div class="collapse" id="collapseExample3">
  <div class="card card-body">
    Il triangolo ruota automaticamente quando espandi o chiudi questa sezione!
  </div>
</div>

Personalmente io a volte racchiudo tutto il codice Collapse con il div con lo stile "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:

<!-- Primo collapse -->
<a data-toggle="collapse" href="#sezione1">...</a>
<div class="collapse" id="sezione1">...</div>

<!-- Secondo collapse -->
<a data-toggle="collapse" href="#sezione2">...</a>
<div class="collapse" id="sezione2">...</div>

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:

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

Esempio Pratico: Nascondere Codice Lungo

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

<p>
  <a class="collapse-link" data-toggle="collapse" href="#codiceCompleto" aria-expanded="false" aria-controls="codiceCompleto">
    <i class="fa fa-code"></i> Mostra codice completo
  </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>
  </div>
</div>

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.