HTML5-Tags details und summary

Mit den Tags <details> und <summary> kann man etwas wirklich Neues in HTML5 machen, was bisher nur mit Javascript realisiert werden konnte.

Viele Webseiten haben zwar schon Bereiche, die zunächst verdeckt sind und sich durch Anklicken öffenen (sogenannte expanding/collapsing-blocks), allerdings zurzeit von den Erstellern der Internetseiten noch fast durchgängig mit Javascript realisiert.

Der Inhalt eines <details>-Elementes wird solange verborgen, bis das im <details>-Element vorhandene <summary>-Element angeklickt wird. Das <summary>-Element ist dabei immer sichtbar.

Hier ein Beispiel dafür:

<details>
    <summary>Details ein- oder ausblenden</summary>
    <p>
        Hier sehen Sie die Datails dazu.
    </p>
</details>

Das <details>-Tag macht das jetzt ohne jeglichen Zusatzprogramme einfach mit HTML5. Man kann erwarten, dass es auf die Dauer die Javascript-Lösungen für solche Funktionen vollständig ablösen wird.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>