Creating an Accordion Without JavaScript Using the HTML `<details>` Tag

What is the <details> tag?

The <details> tag is a semantic HTML element that creates a disclosure widget. It can be in two states: open and closed. By default, it's closed and shows only a brief description (which is set by the <summary> tag).

Basic Example

Let's start with the simplest example:

<details>

  <summary>What is HTML?</summary>

  <p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</p>

</details>

This code will create a simple accordion with the title "What is HTML?" and hidden content.

Creating a Group of Accordions

To create a group of accordions where only one element can be open at a time, use the name attribute:

<div class="accordion">

  <details name="faq" class="accordion__details">

    <summary class="accordion__summary">

      What is CSS?

      <%= vite_icon_tag("chevron-down.svg", class: "accordion__icon") %>

    </summary>

    <div class="accordion__body">

      <p>CSS (Cascading Style Sheets) is a style sheet language that describes the presentation of a document written in HTML.</p>

    </div>

  </details>



  <details name="faq" class="accordion__details">

    <summary class="accordion__summary">

      What is JavaScript?

      <%= vite_icon_tag("chevron-down.svg", class: "accordion__icon") %>

    </summary>

    <div class="accordion__body">

      <p>JavaScript is a programming language that allows you to create interactive web pages.</p>

    </div>

  </details>



  <details name="faq" class="accordion__details" open>

    <summary class="accordion__summary">

      What is React?

      <%= vite_icon_tag("chevron-down.svg", class: "accordion__icon") %>

    </summary>

    <div class="accordion__body">

      <p>React is a JavaScript library for building user interfaces.</p>

    </div>

  </details>

</div>

Styling the Accordion

Now let's add CSS for beautiful styling (Tailwind v4 – just for compactness and because I like it.):

@layer components {

  .accordion {

    @apply flex flex-col gap-2;

  }



  .accordion__details {

    @apply border border-gray-200 rounded-md;



    @media (prefers-reduced-motion: no-preference) {

      interpolate-size: allow-keywords;

    }



    &::details-content {

      block-size: 0;

      @apply transition-all duration-300 opacity-0 overflow-clip;

    }



    &[open]::details-content {

      block-size: auto;

      @apply opacity-100;

    }

  }



  .accordion__summary {

    @apply flex items-center justify-between gap-3 p-4 font-medium rounded-md cursor-pointer;

  }



  .accordion__body {

    @apply px-5 pb-4 -mt-px transition-transform;

  }



  .accordion__icon {

    @apply transition-transform size-5 shrink-0;

  }



  .accordion__details[open] .accordion__icon {

    @apply -rotate-180;

  }

}

Advantages of Using <details>

1. Semantic — the <details> tag has semantic meaning and improves accessibility

2. No dependencies — works without JavaScript

3. Built-in functionality — the browser manages the open/closed state itself

4. Keyboard navigation — works with keyboard out of the box

5. Progressive enhancement — works even if JavaScript is disabled

Browser Support

The <details> tag is supported by all modern browsers:

• Chrome 12+

• Firefox 49+

• Safari 6+

• Edge 79+

• Opera 15+

For older browsers, you can provide a JavaScript polyfill as a fallback.

When to Use <details>

Use <details> when:

• You need a simple accordion without complex animations

• Accessibility and semantic HTML are priorities

• You want to minimize JavaScript dependencies

• You need it to work without JavaScript

Consider alternatives when:

• You need complex animations or transitions

• You require fine-grained control over the accordion behavior

• You need to support very old browsers without polyfills

• The design requires custom layouts that <details> can't accommodate

Conclusion

The <details> tag is a powerful tool for creating accordions without JavaScript. It provides excellent accessibility, semantics, and works in all modern browsers. While styling options are limited compared to JavaScript solutions, it's more than sufficient for most use cases.

Use <details> when you need a simple, reliable, and accessible accordion without unnecessary dependencies. It's a perfect example of progressive enhancement and semantic HTML in action!

Additional Resources

• 📁 Complete Accordion Component Code - Full implementation with styles

• 🚀 JetRockets UI Components - Collection of reusable Rails UI components