Javascript is cool, but it looks like there are so many things we can do without it. One of these, believe it or not, is an accordion!
Simply use the details tag to create the accordion item. Within this, create a summary tag and put whatever text you would like for the title of the accordion.
Finally, add any other content and HTML tags you wish within the details section. Once expanded, by clicking on the rendered summary, these will appear.
<details>
<summary>The title of the accordion</summary>
<p>Anything else</p>
<div>Anything really <span>not kidding</span></div>
</details>If you add multiple details after each other, it will act like an accordion. One thing to note is when you open another item, it won’t automatically close the other one. You would need Javascript here if you require that functionality.
You can also have an initial item open by adding open to the details tag.
<details open>
<summary>The title of the accordion</summary>
<p>Anything else</p>
<div>Anything really <span>not kidding</span></div>
</details>Finally, you can style these all with some simple CSS. Here is an example I created earlier.
Enjoy :)
