Accordion
This works with the native details and summary elements. No classes need to be added
<details>
<summary>This is the title of the accordion</summary>
<p>This is the content of the accordion. It can be as long as you want.</p>
</details>This is the title of the accordion
This is the content of the accordion. It can be as long as you want.
This is the title of the second accordion
This is the content of the second accordion. It can be as long as you want.
Mutually exclusive accordions
Mutually exclusive accordions (only 1 accordion can be open at a time) can be accomplished without JavaScript by using the name atttribue. All accordions with the samename are mutually exclusive even if they are not in the same parent element.
<details name="accordion-group">
<summary>This is the title of the accordion</summary>
<p>This is the content of the accordion. It can be as long as you want.</p>
</details>
<details name="accordion-group">
<summary>This is the title of the second accordion</summary>
<p>This is the content of the second accordion. It can be as long as you want.</p>
</details>This is the title of the accordion
This is the content of the accordion. It can be as long as you want.
This is the title of the second accordion
This is the content of the second accordion. It can be as long as you want.
This is the title of the third accordion
This is the content of the third accordion. It can be as long as you want.