How to create HTML accordion without JavaScript?
Today, we'll explore an innovative and simple approach to building an accordion feature using HTML 'details' and 'summary' tags. These tags offer a unique way to create an accordion-style interface without using CSS or JavaScript.
The
details tag behaves like a container for content that can be shown or hidden, and the
summary tag provides a visible heading or label for the content within the
details element. When we click on the summary tag or activate it, toggles the display of the content inside the details tag, showing or hiding it based on its current state. This behavior
resembles that of an accordion, allowing users to expand or collapse content
sections as needed.
Example 01:
<details>
<summary>Accordion title 01</summary>
<p>Here is the content! for Accordion title 01</p>
</details>
<details>
<summary>Accordion title 02</summary>
<p>Here is the content! for Accordion title 02</p>
</details>
Load the accordion open by default
The details element's default behavior is to load in a closed state, which might result in hidden content when the page initially loads. I prefer to display content without hiding it from readers upon page load.
We can load the accordion open by default by adding the open attribute in the details tag.
<details open>
<summary>Accordion title 01</summary>
<p>Here is the content! for Accordion title 01</p>
</details>
<details open>
<summary>Accordion title 02</summary>
<p>Here is the content! for Accordion title 02</p>
</details>
Styling HTML Accordion using CSS
<h1>Styling Html Accordion using CSS</h1>
<details>
<summary>Accordion title 1</summary>
<div class="inner_div">
<p>Content for Accordion title 1</p>
</div>
</details>
<details>
<summary>Accordion title 2</summary>
<div class="inner_div">
<p>Content for Accordion title 2</p>
</div>
</details>
<details>
<summary>Accordion title 3</summary>
<div class="inner_div">
<p>Content for Accordion title 3</p>
</div>
</details>