DEV Community

loading...
Cover image for Creating accordions with native HTML
Itsopensource

Creating accordions with native HTML

championshuttler profile image Shivam Singhal Originally published at itsopensource.com ・2 min read

Accordions are one of the most commonly used UI components for any website. For example FAQs section of the website, where only the question is shown, and when clicked the answer just opens up.
Generally, we handle this by creating 2 divs and adding some javascript to handle the open and close of the accordion. But recently I stumbled upon this hidden gem in HTML that eliminates the need of all this - <details>

We can simply design a simple FAQ or summary section with <details> HTML tag without using Javascript!!! 🤯🤯🤯.
And the best part... it is supported by all the modern browsers (obviously except IE :( ) - browser compatibility.

Using <details> tag

There are two elements here: <details> and <summary>. <details> is the wrapper for all the content you want to show and hide, and contains the — well, the summary and title of the section. <summary> is optional, if you do not add it, the browser will use some default text. For example, in Firefox and Chrome, it is Details. Below is a sample HTML markup:

<details>
  <summary>Details</summary>
  <p>Something small enough to escape casual notice.</p>
</details>
Enter fullscreen mode Exit fullscreen mode

And it will render like:

Alt Text

This markup can be designed with CSS as any other HTML element. Now for creating beautiful accordions all you need is just HTML and CSS (and a will to let go of IE).

Demo: https://itsopensource.com/demos/details/

References

Cheers.

Discussion (2)

pic
Editor guide
Collapse
geetee profile image
GeeTee

Thanks for sharing

Collapse
raddevus profile image
raddevus

That's a nice short example and a good one to keep in mind. Thanks for sharing.