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

Beispiel:HTML details-5.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">  
 <title>Akkordion mit einem Schuss Animation</title>

<style> details::details-content { 

 height: 0;
 overflow-y: clip;
 padding: .5em;
 transition: 1s allow-discrete;

}

details[open]::details-content { height: 15em; 

 /* Interpolation only */
 height: calc-size(auto, size);

}


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>

</head>

<body>

Akkordion mit einem Schuss Animation

Beim Klicken auf das summary-Element erhält details ein open-Attribut und gibt den Inhalt frei:

<details> 

  <summary>
       Browser-News:
  </summary>

Das details-Element ist in allen modernen Browsern verfügbar.

Alle Elemente können mit CSS selektiert werden,
mit ::details-content auch der Inhalt.

In modernen Browser berechnet calc-size() die Höhe, als Fallback wird ein fester Wert angegeben, der bei einer Veränderung des Inhalts angepasst werden muss.

Solche magic numbers sollten nach Möglichkeit vermieden werden!

</details>

</body> </html>

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