Um Bootstrap 5 Collapse zu erstellen, müssen die erforderliche HTML-Struktur, CSS-Klassen und JavaScript-Code hinzugefügt werden. So können Sie es machen:

1. HTML-Struktur:

- Erstellen Sie ein Containerelement mit der Klasse „Container“, in dem Sie Ihren reduzierbaren Inhalt platzieren.

- Fügen Sie innerhalb des „Container“-Elements ein „“-Element hinzu, das als Umschalttaste zum Reduzieren fungiert.

- Fügen Sie unter der Umschalttaste ein „

“-Element hinzu, das den reduzierbaren Inhalt enthält. Stellen Sie sicher, dass Sie diesem „

“ die Klasse „collapse“ und ein „id“-Attribut hinzufügen, z. B. „collapseExample“.

2. CSS-Klassen:

- Fügen Sie die Bootstrap-CSS-Datei in Ihre Webseite ein.

- Fügen Sie die folgenden CSS-Klassen hinzu:

- Klasse „collapse“ für den reduzierbaren Inhalt „

“.

- Klasse „show“ für den reduzierbaren Inhalt „

“, um ihn zunächst anzuzeigen (optional).

- „collapsed“-Klasse für die Umschalttaste „

“, um zunächst den reduzierten Zustand anzuzeigen (optional).

3. JavaScript:

- Fügen Sie die Bootstrap-JavaScript-Datei in Ihre Webseite ein.

- Fügen Sie das folgende Skript hinzu:

„Javascript

// Wählen Sie die Umschaltfläche und die reduzierbaren Inhaltselemente aus

const toggleBtn =document.querySelector('.toggle-btn');

const collapsibleContent =document.getElementById('collapseExample');

// Ereignis-Listener zur Umschalttaste hinzufügen

toggleBtn.addEventListener('click', function() {

// Schalten Sie die Klasse „show“ für den reduzierbaren Inhalt um

collapsibleContent.classList.toggle('show');

// Die „reduzierte“ Klasse auf der Umschalttaste umschalten

toggleBtn.classList.toggle('collapsed');

});

„

Dieses Skript übernimmt die Funktion zum Reduzieren/Erweitern, wenn auf die Umschalttaste geklickt wird.

Wenn Sie diese Schritte befolgen, können Sie mit Bootstrap 5 ganz einfach ein zusammenklappbares Element erstellen.