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

Beispiel:HTML details-Element3a.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <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>::details-content + ::open</title> <style> 

 details {
   padding: 0;
   width: 20em;
   font-family: sans-serif;
   background-color: white;
   transition: background-color 400ms;
   
 }
 
 summary {
   font-weight: bold;
   cursor: pointer;
   padding: 0.5em;
   background-color: oklch(0.9 0.1 125);
   border: thin solid oklch(0.54 0.1 90);
   border-radius: 0.25em;
 }
 
 details:open {
   border-color: transparent;
   background-color: oklch(0.9 0.1 90);
 }
 
 /* Ausblenden nur für Browser, die details:open::details-content vollständig unterstützen */
 @supports selector(details:open::details-content) {
   details::details-content {
     opacity: 0;
     transition:
       opacity 600ms,
       border-color 600ms,
       content-visibility 600ms allow-discrete;
   }
 
   details:open::details-content {
     opacity: 1;
   }
 }

</style> </head> <body>

::open und ::details-content

<details> 

 <summary>Weiterführende Infos</summary>

Das ist der erste Absatz.

  • Nummer 1
  • Nummer 2
  • Nummer 3

Das ist noch ein Absatz nach der Liste.

</details>

</body> </html>

Abgerufen am 23.03.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:HTML_details-Element3a.html"