Widget:TestTabs: Unterschied zwischen den Versionen
Aus FürthWiki
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 7: | Zeile 7: | ||
} | } | ||
</style> | </style> | ||
<body> | |||
<details open class="brizzle"> | <details open class="brizzle"> | ||
<summary class="drizzle"> | <summary class="drizzle"> | ||
| Zeile 39: | Zeile 40: | ||
</div> | </div> | ||
</details> | </details> | ||
</body> | |||
Version vom 3. Januar 2024, 11:51 Uhr
<style> brizzle {
background-color: red;
} drizzle{
background-color: green;
} </style> <body> <details open class="brizzle">
<summary class="drizzle">
How do you create an accordion?
</summary>
Easy! As long as you don't have to support IE11 or older browsers you could use<details>and<summary>natively.
</details>
<details>
<summary>
What if I have to support IE11 or older browsers?
</summary>
No worries. The fallback for these elements is quite good. They will display as open. You won't get the open/close mechanism, but you won't lose any content either.
</details>
<details>
<summary>
What type of content can I have inside one of these?
</summary>
Almost anything you'd like. The <details> element allows all <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content" target="_blank">flow content</a>, which is basically everything.
</details>
<details>
<summary>
How does it work?
</summary>
The<details>element encapsulates the<summary>element. The<summary>becomes the 'label' for the<details>and acts like a button. When clicked, the attributeopenis added to the<details>element, making it display. You can therefore style the open and closed states seperately if you'd like.
</details>
</body>
