veröffentlicht am: 14. November 2023
HTML: Accordion erstellen – So gehts
Um eine Accordion in HTML zu erstellen, folge einfach dieser Schritt-für-Schritt-Anleitung:
Schritt 1: Erstelle die Grundstruktur des Accordion. Füge einen Container hinzu, der die gesamte Accordion-Funktion umfasst. Verwende dafür eine
<div class="accordion">
</div>Schritt 2: Füge den Header des Accordion-Elements hinzu. Vervollständige die Struktur des Accordion, indem du eine Überschrift innerhalb des Containers einfügst, die als Klickbereich dient, um den Inhalt ein- und auszuklappen:
<div class="accordion">
<h3>Accordion Header</h3>
</div>Schritt 3: Füge den Inhalt des Accordion-Elements hinzu. Füge einen Bereich hinzu, der den Inhalt darstellt, der ein- und ausgeklappt werden soll. Verstecke diesen Bereich zunächst, indem du die CSS-Eigenschaft „display: none;“ verwendest:
<div class="accordion">
<h3>Accordion Header</h3>
<div class="content" style="display: none;">
Accordion Inhalt
</div>
</div>Schritt 4: Implementiere den JavaScript-Code, um das Accordion zu steuern. Füge den folgenden Code vor dem schließenden -Tag hinzu:
<script>
const accordions = document.getElementsByClassName('accordion');
for (let i = 0; i < accordions.length; i++) {
accordions[i].addEventListener('click', function() {
this.classList.toggle('active');
const content = this.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
}
</script>Schritt 5: Füge die CSS-Stile hinzu, um das Accordion zu gestalten. Füge die folgenden Stile in den -Bereich deines HTML-Dokuments ein oder füge sie in eine externe CSS-Datei ein:
<style>
.accordion {
cursor: pointer;
background-color: #eee;
color: #444;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f9f9f9;
}
</style>Kompletter Beispielcode
<html>
<head>
<style>
.accordion {
cursor: pointer;
background-color: #eee;
color: #444;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="accordion">
<h3>Accordion Header</h3>
<div class="content" style="display: none;">
Accordion Inhalt
</div>
</div>
<script>
const accordions = document.getElementsByClassName('accordion');
for (let i = 0; i < accordions.length; i++) {
accordions[i].addEventListener('click', function() {
this.classList.toggle('active');
const content = this.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
}
</script>
</body>
</html>Hat dir der Beitrag gefallen?
Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite
Whatsapp: Ton für Mitteilungen ändern – So gehts
Whatsapp: Verknüpfte Geräte löschen – So gehts
Whatsapp: Telefonnummer ändern – So gehts
Whatsapp: Nachricht löschen – So gehts
Whatsapp: Zuletzt verwendete Smileys löschen
Whatsapp: Chat exportieren – So gehts
Whatsapp: Umfrage erstellen – So gehts
Telegram: Nutzer melden – So gehts
Telegram: Keine Benachrichtigungen – iPhone
Telegram: Bedienungsanleitung – So gehts
Telegram: Gruppe erstellen – So gehts
Telegram: Zugriff auf Kamera erlauben
Telegram: Sticker erstellen – So gehts
Telegram: Zugriff auf Fotos erlauben – So gehts