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

Beispiel:HTML details-Element.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">

<style> details { 

 border: thin solid gainsboro;
 margin-bottom: 0.5em;

}

summary { 

 padding: .5em;

}

details[open] summary { 

 background: coral;

}

details p { 

 padding: 0 1em;

}

body { 

 max-width: 50em;
 margin: 0 auto;
 padding: 0 1em;

}

.columns { 

 display: flex;
 flex-wrap: wrap;
 gap: 1em;

}

.columns > * { 

 flex: 1 1 20em;

}

</style> 

 <title>Details</title>

</head>

<body>

Akkordeon mit details und summary

Das details-Element ermöglicht es ganz ohne den Einsatz von JavaScript, ursprünglich verborgene Textinhalte aufzuklappen. 

   <details open>
     <summary>Browser-News:</summary>

Während Chrome, Opera und Safari das neue Element schon lange unterstützen, ist es in Firefox seit Version 49 und im Edge seit 2020 verfügbar. 

   </details>

   <details>
     <summary>Links</summary>

   </details>

   <details>
     <summary>Weitere Links</summary>

   </details>

</body> </html>

Abgerufen am 24.03.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:HTML_details-Element.html"