Beispiel:HTML details-5.html
Aus SELFHTML-Wiki
<!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:SELFHTML-Beispiel-Grundlayout.css">
<style>
details > div {
padding: .5em;
overflow: hidden;}
details[open] > div {
animation: sliding 1s forwards;
}
@keyframes sliding {
0% {
height: 0;
}
100% {
height: 15em;
}
}
details {
grid-column: 2 / 3;
height: min-content;
transition: all .5s;
border: thin solid;
}
summary {
position: relative;
line-height: 300%;
padding-left: 1em;
}
summary::after {
content: " 🡳 ";
position: absolute;
color: green;
font-size: 2em;
font-weight: bold;
right: 1em;
top: .2em;
transition: all 0.5s;
}
details[open] summary::after {
color: red;
transform: scale(1,-1);
}
body {
max-width: 50em;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
}
h1 {
grid-column: 1 / -1;
}
</style>
<title>details - 5</title>
</head>
<body>
<h1>Akkordion mit einem Schuss Animation</h1>
<p>
Beim Klicken auf das summary-Element erhält details ein open-Attribut und gibt den Inhalt frei:
</p>
<details>
<summary>
Browser-News:
</summary>
<div>
<p>Das details-Element ist in allen modernen Browsern verfügbar.</p>
<p>Das Öffnen selbst kann leider nicht mit CSS animiert werden.</p>
<p>Deshalb wird die Höhe des div-Containers aminiert. Hierbei benötigt man aber einen festen Wert, der bei einer Veränderung des Inhalts angepasst werden muss.</p>
<p>Solche <strong>magic numbers</strong> sollten nach Möglicheit vermieden werden!</p>
</div>
</details>
</body>
</html>