Beispiel:HTML details-6.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:SELFHTML-Beispiel-Grundlayout.css"> <title>Exklusives Akkordeon</title> <script>

</script> <style> details > div { 

   padding: .5em;

}

details { border: thin solid; }

summary { 

   position: relative;  
   line-height: 300%;

padding-left: 1em; 

   font-weight: bold;
   }

summary::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='green' d='m0,8 v-4 l5,5 v-10 h5 v10 l5,-5 v4 l-7.5,7.5 z'/%3E%3C/svg%3E"); position: absolute; width:1em; aspect-ratio:1; right: 1em; top: .2em; transition: all 0.5s; }

details[open] summary::after { transform: scale(1, -1); filter: hue-rotate(250deg) } @media (min-width: 30em) { body { 

 max-width: 50em;
 display: grid;
 grid-template-columns: 24em 1fr;
 gap: 1em;

} }

h1 { 

 grid-column: 1 / -1;

} 

 </style>

</head>

<body>

Exklusives Akkordeon mit details und name-Attribut

<details name="acc" > <summary> aufklappbar - Wie funktioniert das? </summary>

Das details-Element ermöglicht es, nur mit HTML einen Klappmechanismus in Ihre Seiten einzubauen.

Umschließen sie einen HTML-Block mit einem details-Element.

Bei einem Klick auf das details-Element öffnet sich der Block.

</details> <details name="acc"> <summary> Sind eigene Titel-Texte möglich? </summary>

Mit dem summary-Element können Sie eigene Texte verwenden.

Daneben gibt es noch einen eingebauten marker, den Sie mit CSS stylen können.

</details> <details name="acc" open> <summary> Exklusives Akkordeon </summary>

Wenn Sie mehrere details-Elemente über ein gemeinsames name-Attribut verbinden, werden beim Öffnen eines details-Elements bereits geöffnete details-Elemente ohne weiteres Zutun geschlossen.

Dies funktioniert (Stand: Dezember 2023) bereits in Chrome, Edge und Safari.

</details>

Interaktivität als Standardverhalten von nativen HTML-Elementen! - ganz ohne JavaScript!

In älteren Browsern bleiben die anderen details-Elemente aufgeklappt - graceful degradation,
bzw. progressive enhancement für Browser, die dies bereits unterstützen.

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML_details-6.html&oldid=94335“