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: .5em;
 width: 20em;
 font-family: sans-serif;
 background-color: white;
 transition: background-color 400ms;

padding: 0; }

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::details-content { 

 opacity: 0;
 transition:
   opacity 600ms,
   border-color 600ms,
   content-visibility 600ms allow-discrete;

}

details:open::details-content { 

 opacity: 1;

}

details:open { border-color: transparent; 

 background-color: oklch(0.9 0.1 90);

} </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.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:HTML_details-Element3a.html"