How to create HTML accordion without JavaScript?

Share On

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:

Try It

        
        <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.

Try It

        
        <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

Try It

        
        <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>