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 hintenhinter den Wortbergenfern 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.

<textarea> Mehrzeiliger Eingabebereich

CSS - Leuchtende blaue Eingabefelder

PHP - Nach einer bestimmten Zeit automatisch abmelden

JavaScript - Bildschirm und Fenstergröße ermitteln

MySQL - Eintrag überschreiben

Seitentitel
Der Seitentitel ist sehr wichtig <title> Seitentitel </title>, in diesem Teil vorkommende Wörter werden von den Suchmaschinen besonders stark gewertet. Außerdem, wenn die Seite zu den Favoriten/Bookmarks hinzugefügt wird, wird dort auch der Seitentitel angezeigt. Oder können Sie sich unter einem Bookmark mit dem Namen "Seite 2" etwas vorstellen??
Tipp: Wechseln Sie einfach mal zu den diversen Suchdiensten wie Google oder Bing! und geben Sie dort als Suchbegriff "NEWPAGE" ein. Ich habs versucht und schlappe 22000 Treffer erzielt. "INDEX" hat noch mehr ergeben.