When you think about creating an accordion the obvious solution is to use JavaScript - you listen for clicks and toggle the section open/closed. Simple. But what if you don't want to use JavaScript?
The other obvious alternative is to make each section a radio button, hide the button image, then open/close the section based on whether the button is checked or not. Also simple, but there's an even simpler way...
You just code the HTML using specific tags and it does the rest for you:
<details>
<summary>This is always visible</summary>
Anything inside the details tag but outside the summary tag will only be shown when the accordion is open
</details>
And that's it, it's done. It does allow you to open every element of the accordion at once, which may or may not be what you want. If it's not you can add JavaScript to detect if another section is open, using details.open. Although I started this by saying this is a way of getting an accordion without using JavaScript...
This works in all browsers except IE, but is anyone even supporting IE any more?
Top comments (0)