Come nascondere/mostrare il contenuto usando la classe di collasso in bootstrap 5

Un componente pieghevole è molto essenziale quando si desidera visualizzare un'enorme quantità di contenuti su una singola pagina web. Il vantaggio di utilizzare un pieghevole è che ti impedisce di ingombrare la tua pagina web con un sacco di contenuti e quindi migliorare l'esperienza dell'utente.

Un pieghevole fondamentalmente ti consente di mostrare e nascondere il contenuto usando elementi HTML. Qui abbiamo discusso di come puoi nascondere o mostrare contenuti usando la classe di collasso in bootstrap 5.

Come nascondere/mostrare il contenuto usando la classe di collasso in bootstrap 5

Come già accennato a un collapdibile lascia che mostri e nascondi enormi contenuti su una pagina web. Se ti stai chiedendo come viene creato un collapdibile e utilizzato per nascondere/mostrare i contenuti usando Bootstrap 5, consulta le sezioni imminenti.

Come nascondere il contenuto usando un elemento

Un modo per creare un pieghevole è usando l'elemento.

Html

Questa è una voce

Questo è il primo paragrafo.

Questo è il secondo paragrafo.

Questo è il terzo paragrafo.

Nel codice sopra, il contenitore Div è stato reso collassibile assegnandolo il .classe di collasso. Successivamente, alcuni contenuti sono stati inseriti all'interno di quel Div che verrà nascosto o mostrato usando il pulsante pieghevole.

L'elemento viene utilizzato per nascondere/mostrare il contenuto all'interno del diviebile di Div assegnando Data-BS-Toggle = "collasso". Inoltre, Data-BS-Target = “#ID” viene utilizzato per collegare il pulsante al contenitore di div.

Produzione

Ecco come puoi nascondere/mostrare il contenuto usando i pulsanti pieghevoli.

Come nascondere il contenuto usando un tag

Un altro modo per generare un pieghevole è usando il tag. Qui abbiamo mostrato questo metodo nello snippet del codice di seguito.

Html

Il resto del codice sarà lo stesso come sopra con l'unica differenza che qui abbiamo usato un tag all'interno di a elemento e per controllare il contenuto che abbiamo assegnato il Data-BS-Toggle = "collasso" al tag di ancoraggio e all'ID che collega questo tag al contenitore di div.

Produzione

Un pieghevole è stato realizzato con successo usando il tag di ancoraggio.

Come usare il .Mostra classe

Per impostazione predefinita, il contenuto all'interno di un collapdibile sarà nascosto e mostrerà quando si fa clic sul pulsante o il collegamento. Ma se si desidera che i tuoi contenuti vengano visualizzati per impostazione predefinita e nascondilo dopo aver fatto clic sul pulsante/collegamento, usa il .Mostra classe.

Html

Qui al contenitore Div è stato assegnato il .spettacolo classe insieme a .classe di collasso. Ciò modificherà il comportamento predefinito del crollo e il contenuto verrà mostrato per impostazione predefinita e si nasconderà una volta che il collegamento viene fatto clic.

Produzione

IL .La lezione di spettacolo funziona correttamente.

Conclusione

Ai fini di nascondere o mostrare il contenuto utilizzando la classe di collasso Assegna Data-BS-Toggle = "collasso" a a elemento o un etichetta e collegare questi elementi con l'elemento collassibile usando data-bs-target = "#id" In caso di un pulsante e href = "#id" In caso di collegamento. Il contenuto è nascosto in un collapdibile per impostazione predefinita, tuttavia, se si desidera modificare questo comportamento predefinito, quindi utilizzare il .Mostra classe.