How do you create an accordion?
Easy! As long as you don't have to support IE11 or older browsers you could use <details>
and <summary>
natively.
What if I have to support IE11 or older browsers?
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.
What type of content can I have inside one of these?
Almost anything you'd like. The
<details>
element allows all
flow content, which is basically everything.
How does it work?
The <details>
element encapsulates the <summary>
element. The <summary>
becomes the 'label' for the <details>
and acts like a button. When clicked, the attribute open
is added to the <details>
element, making it display. You can therefore style the open and closed states seperately if you'd like.