Hvordan skjule/vise innhold ved hjelp av kollapsklasse i Bootstrap 5

En sammenleggbar komponent er veldig viktig når du vil vise en enorm mengde innhold på en enkelt webside. Fordelen med å bruke en sammenleggbar er at det forhindrer deg i å rote websiden din med masse innhold og dermed forbedre brukeropplevelsen.

En sammenleggbar lar deg i utgangspunktet vise og skjule innhold ved hjelp av HTML -elementer. Her har vi diskutert hvordan du kan skjule eller vise innhold ved hjelp av kollapsklasse i Bootstrap 5.

Hvordan skjule/vise innhold ved hjelp av kollapsklasse i Bootstrap 5

Som allerede nevnt en sammenleggbar la deg 'du viser og skjuler stort innhold på en webside. Hvis du lurer på hvordan en sammenleggbar blir opprettet og brukt til å skjule/vise innhold ved hjelp av Bootstrap 5, må du ta kontakt med de kommende seksjonene.

Hvordan skjule innhold ved hjelp av et element

En måte å lage en sammenleggbar på er ved å bruke elementet.

Html

Dette er noe overskrift

Dette er første avsnitt.

Dette er andre avsnitt.

Dette er tredje avsnitt.

I koden ovenfor har DIV -beholderen blitt gjort sammenleggbar ved å tilordne den .kollaps klasse. Etterpå har noe innhold blitt plassert inne i det div som vil bli skjult eller vist ved hjelp av den sammenleggbare knappen.

Elementet brukes til å skjule/vise innholdet inne i den sammenleggbare diven ved å tilordne data-bs-toggle = “kollaps”. Videre brukes data-BS-Target = "#id" til å koble knappen til den sammenleggbare DIV-beholderen.

Produksjon

Slik kan du skjule/vise innhold ved hjelp av sammenleggbare knapper.

Hvordan skjule innhold ved hjelp av en tag

En annen måte å generere en sammenleggbar er ved å bruke taggen. Her har vi vist denne metoden i kodebiten nedenfor.

Html

Resten av koden vil være den samme som ovenfor med den eneste forskjellen som vi her har brukt en Tag inni en element og for å kontrollere innholdet vi har tildelt data-bs-toggle = “kollaps” til ankerkoden og IDen som kobler denne taggen til den sammenleggbare DIV -beholderen er tildelt Href -attributtet.

Produksjon

En sammenleggbar ble vellykket laget med ankerkoden.

Hvordan bruke .Vis klasse

Som standard vil innholdet inne i en sammenleggbart være skjult og vil vises når knappen eller lenken er klikket. Men hvis du vil at innholdet ditt skal vises som standard og skjul det etter at knappen/lenken er klikket, så bruk .Vis klasse.

Html

Her har DIV -containeren blitt tildelt .forestilling klasse sammen med .kollaps klasse. Dette vil endre standardoppførselen til det sammenleggbare, og innholdet vil bli vist som standard og vil gjemme seg når lenken er klikket.

Produksjon

De .Visklassen fungerer som den skal.

Konklusjon

Med det formål å skjule eller vise innhold ved hjelp data-bs-toggle = “kollaps” til en element eller en stikkord og koble disse elementene med det sammenleggbare elementet ved hjelp av Data-BS-Target = “#id” i tilfelle en knapp og href = “#id” I tilfelle en lenke. Innholdet er skjult i en sammenleggbar som standard, men hvis du ønsker å endre denne standardoppførselen, så bruk .Vis klasse.