Come creare una fisarmonica usando bootstrap 5

Una fisarmonica avvolge più elementi pieghevoli in cui è possibile posizionare un'enorme quantità di dati e può essere nascosta o mostrata alla preferenza di un utente. Il vantaggio finale dell'utilizzo di una fisarmonica è che impedisce il disordine di grandi contenuti su una singola pagina web. Inoltre, una fisarmonica migliora l'esperienza dell'utente accorciando le pagine Web riducendo così lo scorrimento.

Leggi l'articolo qui sotto per imparare a creare una fisarmonica usando Bootstrap 5.

Come creare una fisarmonica usando bootstrap 5

Nell'esempio seguente dimostreremo come è possibile creare una fisarmonica usando Bootstrap 5.

Html

Il primo passo per fare una fisarmonica è creare un contenitore Parent Div e assegnarlo un ID. Qui l'abbiamo assegnato un ID etichettato "Formo". Lo scopo di questo principale contenitore di div è quello di nascondere tutti gli altri elementi pieghevoli quando viene mostrato uno degli elementi pieghevoli.

Html

Casa



Qualche paragrafo.

Per il bene di questo esempio faremo uso del componente della scheda per generare una fisarmonica. Pertanto, nel codice sopra, stiamo realizzando una carta assegnandola .carta Classe per un contenitore Div. Successivamente, stiamo facendo l'intestazione della carta usando il .Terreno di carta Classe e un tag di ancoraggio che nasconde/mostra che il contenuto è stato nidificato all'interno dell'intestazione e collegato al Div collassibile usando l'ID.

Infine, un div è stato reso pieghevole usando il .crollo la classe e il corpo della carta erano nidificati all'interno del contenitore pieghevole. Notare che data-bs-parent = "#id" fa nascondere tutti gli altri collapibili sotto il contenitore di div Parent quando viene visualizzato uno dei collapibili.

Html

Di



Qualche paragrafo.

Un'altra carta è stata generata utilizzando la stessa tecnica utilizzata per la prima carta. L'unica differenza è che l'ID utilizzato per collegare il tag di ancoraggio al diviebile è diverso da quello utilizzato per la prima scheda.

Html

Servizi



Qualche paragrafo.

Lo stesso approccio è stato utilizzato per rendere ancora un'altra scheda pieghevole con un ID diverso che collega il tag di ancoraggio con il contenitore di div.

Produzione

Una fisarmonica è stata generata con successo.

Nota: Se si esclude l'attributo Data-BS-Parent, gli elementi della fisarmonica rimangono aperti mentre altri elementi vengono aperti.

Seguendo la tecnica illustrata sopra, puoi facilmente generare una fisarmonica usando Bootstrap 5.

Conclusione

Per fare una fisarmonica devi creare un elemento come un contenitore di div .crollo classe e nidificare tali elementi pieghevoli all'interno di un elemento genitore. L'articolo sopra utilizza una scheda per generare una fisarmonica. Un totale di tre carte con un'intestazione e un corpo sono state generate e resi pieghevoli. Ciascuna delle carte era collegata a un tag di ancoraggio utilizzato per nascondere/mostrare il contenuto posizionato all'interno di ciascuna scheda pieghevole. Inoltre, il data-bs-parent = "#id" è stato usato per nascondere tutti gli altri collapibili sotto l'elemento genitore mentre uno viene visualizzato.