JavaScript - HTML-Details automatisch schließen
Nach dem anklicken einer Detail-Ansicht, wird diese automatisch nach 5 Sekunden (5000 Millisekunden) geschlossen.
Eins
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.Zwei
Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.Drei
Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen.
<details class="detail">
<summary>Eins</summary>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte …
</details>
<details class="detail">
<summary>Zwei</summary>
Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte …
</details>
<script>
const details = document.querySelectorAll('.detail');
details.forEach((detail) => {
detail.addEventListener('click', () => {
let timer = null;
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(() => {
detail.removeAttribute('open');
}, 5000); // Zeitangabe in Millisekunden
});
});
</script>
Zeit individuell anpassen
Eins
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.Zwei
Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.Drei
Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen.Mit dem data-*-Attribut: data-time="1000" im <summary>-Tag, die Zeitangabe individuell anpassen.
<details class="detail">
<summary data-time="1000">Eins</summary>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte …
</details>
<details class="detail">
<summary data-time="5000">Zwei</summary>
Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte …
</details>
<script>
const details = document.querySelectorAll('.detail');
details.forEach((detail) => {
detail.addEventListener('click', (e) => {
let timer = null;
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(() => {
detail.removeAttribute('open');
}, e.target.dataset.time);
});
});
</script>
Siehe auch: HTML-<summary>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<table> Tabelle
CSS - Vertikaler Text mit horizontalen Buchstaben
PHP - Auswahlliste aus dem Inhalt einer DB-Spalte erstellen