Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Beispiel:HTML details-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>Exklusives Akkordeon</title> <script>

</script> <style> details::details-content { height: 0; overflow-y: clip; padding: .5em; transition: 1s allow-discrete; }

details[open]::details-content { height: 12em; /* Fallback für ältere Brwoser, die calc-size() nicht verstehen */ height: calc-size(auto, size); }

summary { 

   position: relative;  
   line-height: 300%;

padding-left: 1em; 

   font-weight: bold;
   }

summary::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='green' d='m0,8 v-4 l5,5 v-10 h5 v10 l5,-5 v4 l-7.5,7.5 z'/%3E%3C/svg%3E"); position: absolute; width:1em; aspect-ratio:1; right: 1em; top: .2em; transition: all 0.5s; }

details[open] summary::after { transform: scale(1, -1); filter: hue-rotate(250deg) } @media (min-width: 30em) { body { 

 max-width: 50em;
 display: grid;
 grid-template-columns: 24em 1fr;
 gap: 1em;

} }

h1 { 

 grid-column: 1 / -1;

} 

 </style>

</head>

<body>

Exklusives Akkordeon mit details und name-Attribut

<details name="acc" > <summary> aufklappbar - Wie funktioniert das? </summary>

Das details-Element ermöglicht es, nur mit HTML einen Klappmechanismus in deine Seiten einzubauen.

Umschließe einen HTML-Block mit einem details-Element.

Bei einem Klick auf das details-Element öffnet sich der Block.

</details>

<details name="acc"> <summary> Sind eigene Titel-Texte möglich? </summary>

Mit dem summary-Element kannst du eigene Texte verwenden.

Daneben gibt es noch einen eingebauten marker, den man mit CSS stylen kann.

</details>

<details name="acc" open> <summary> Exklusives Akkordeon </summary>

Wenn man mehrere details-Elemente über ein gemeinsames name-Attribut verbindet, werden beim Öffnen eines details-Elements bereits geöffnete details-Elemente ohne weiteres Zutun geschlossen.

Dies funktioniert in allen modernen Browsern!

</details>

Interaktivität als Standardverhalten von nativen HTML-Elementen! - ganz ohne JavaScript!

Ältere Browser ignorieren das name-Attribut – dann können mehrere details-Elemente gleichzeitig offenstehen." - graceful degradation,
bzw. progressive enhancement für Browser, die dies bereits unterstützen.

</body> </html>

Abgerufen am 22.03.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:HTML_details-6.html"