Stop making accordions from scratch!!

[aniakubow]

The name attribute of the <details> element is soon to be supported across all major browsers! What is it however? It’s the thing that will allow most engines to handle common UI accordion patterns using only <details> elements. To explain what this is, think of a normal accordion, that allows you to to open any detail. Here is the code for that. Now to make it exclusive, so only 1 is open at any time- all you would do is add the same name attribute to each detail element you want to link together. And voila! Only one detail is open at any one time. You can take the code aswell as the browser compatibility from below and make sure to save this for later and follow for more tips.

—HTML—
<details name=“accordion”>
<summary>Detail 1</summary>
Here is my first detail.
</details>
<details name=“accordion”>
<summary>Detail 2</summary>
Here is my second detail.
</details>
<details name=“accordion”>
<summary>Detail 3</summary>
Here is my third detail.
</details>

—CSS—
details {
border: 1px solid #8e8e8e;
border-radius: 4px;
padding: 20px;
margin: 10px;
width: 200px;
font-family: sans-serif;
}

summary {
font-weight: bold;
}

details[open] summary {
margin-bottom: 10px;
}

#details #accordion #UI #HTML #CSS #webdev

[ban_droid]

cool, any plan on making animated accordion tutorial using these?

[ArmusPlays]

Pls keep making more vids I really would like to learn stuff instead of brain rot doomscrolling. I’ve actually been getting into JavaScript coding recently so I can’t wait to learn more when I get a few mins on yt shorts. ❤️

[Philippe-coder]

This is very awesome. I often use Javascript for that but now i can use HTML only great

[AbdelkaderBoukhalfoun]

can we style it with animation 3d ? voila 😅

[yogeshnimkar]

You're gorgeous and beautiful. I don't care about CSS 😘💋