So erstellen Sie ein Akkordeon mit Bootstrap 5

Ein Akkordeon wickelt mehrere zusammenklappbare Elemente, bei denen eine große Datenmenge platziert und versteckt oder auf der Präferenz eines Benutzers angezeigt werden kann. Der ultimative Vorteil der Verwendung eines Akkordeons besteht darin, dass es die Übereinstimmung großer Inhalte auf einer einzelnen Webseite verhindert. Darüber hinaus verbessert ein Akkordeon die Benutzererfahrung, indem die Webseiten verkürzt werden.

Lesen Sie den Artikel unten, um zu erfahren, wie Sie ein Akkordeon mit Bootstrap 5 erstellen.

So erstellen Sie ein Akkordeon mit Bootstrap 5

Im folgenden Beispiel zeigen wir, wie Sie ein Akkordeon mit Bootstrap 5 erstellen können.

Html

Der erste Schritt bei der Erstellung eines Akkordeon. Hier haben wir ihm eine ID mit dem Namen "Akkordeon" zugewiesen. Der Zweck dieses übergeordneten Div -Containers ist es, alle anderen zusammenklappbaren Elemente zu verbergen, wenn eines der zusammenklappbaren Elemente gezeigt wird.

Html

Heim



Ein Absatz.

Für dieses Beispiel verwenden wir die Kartenkomponente, um ein Akkordeon zu generieren. Daher erstellen wir im obigen Code eine Karte, indem wir sie zuweisen .Karte Klasse zu einem Div -Behälter. Anschließend machen wir den Kopfball der Karte mit dem .Kartenhader Klasse und ein Anker -Tag, das sich versteckt/zeigt, dass der Inhalt im Kopfschicht verschachtelt und mit der ID mit dem zusammenklappbaren Div verbunden wurde.

Zuletzt wurde ein Div mit dem zusammenklappbar gemacht .Zusammenbruch Klasse und die Kartenbehörde wurden im zusammenklappbaren Behälter verschachtelt. Beachten Sie, dass Data-BS-Parent = "#id" macht alle anderen Zusammenbrüche, um sich unter dem übergeordneten Div -Container zu verstecken, wenn eines der Zusammenbrüche angezeigt wird.

Html

Um



Ein Absatz.

Eine andere Karte wurde mit der gleichen Technik erzeugt, die für die erste Karte verwendet wurde. Der einzige Unterschied besteht darin.

Html

Dienstleistungen



Ein Absatz.

Der gleiche Ansatz wurde verwendet, um eine weitere zusammenklappbare Karte mit einer anderen ID zu erstellen, die das Anker -Tag mit dem zusammenklappbaren Div -Container verknüpft.

Ausgang

Ein Akkordeon wurde erfolgreich erzeugt.

Notiz: Wenn Sie das Data-BS-Elternattribut ausschließen, bleiben Akkordeonelemente offen, während andere Elemente geöffnet werden.

Im Folgenden der oben dargestellten Technik können Sie ein Akkordeon mit Bootstrap 5 problemlos generieren.

Abschluss

Um ein Akkordeon zu erstellen .Zusammenbruch Klassen- und Nest -solche zusammenklappbaren Elemente in einem übergeordneten Element. Der obige Artikel verwendet eine Karte, um ein Akkordeon zu generieren. Insgesamt drei Karten mit einem Kopfball und einer Körper wurden erzeugt und zusammenklappbar gemacht. Jede der Karten wurde mit einem Anker -Tag verknüpft, mit dem Inhalte in jeder zusammenklappbaren Karte ausgeblendet/angezeigt wurden. Außerdem die Data-BS-Parent = "#id" wurde verwendet, um alle anderen Zusammenbrüche unter dem übergeordneten Element zu verbergen, während einer angezeigt wird.