La versione 4 di Bootstrap permette di avere dei contenuti che possono essere resi visibili o invisibili con un'animazione utilizzando solamente codice HTML (senza quindi dover scrivere codice JavaScript).

Per prima cosa, dobbiamo crere un div e assegnargli la classe css collapse. Questo div è quello che viene mostrato o nascosto. Il secondo step consiste nel creare i pulsante o il link che mostra o nasconde il div. Nel caso in cui utilizziamo un tag , dobbiamo aggiungere a questo l'attributo data-toggle specificando il valore collapse e l'attributo data-target specificando il selettore css che punta al div precedentemente creato.

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#content">
  Button
</button>
<div class="collapse" id="content">
  Questo testo può essere nascosto o visibile
</div>

Nel caso in cui usiamo invece un tag , invece dell'attributo data-target, dobbiamo usare l'attributo href.

<a class="btn btn-primary" data-toggle="collapse" href="#content">
  link
</button>
<div class="collapse" id="content">
  Questo testo può essere nascosto
</div>