Beispiel:HTML details-Element3a.html
Aus SELFHTML-Wiki
<!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>
<h1><code>::open</code> und <code>::details-content</code></h1>
<details>
<summary>Weiterführende Infos</summary>
<p>Das ist der erste Absatz.</p>
<ul>
<li>Nummer 1</li>
<li>Nummer 2</li>
<li>Nummer 3</li>
</ul>
<p>Das ist noch ein Absatz nach der Liste.</p>
</details>
</body>
</html>
