DEV Community

Discussion on: Accordion Tabs with pure CSS

Collapse
violet profile image
Elena • Edited

The simplest accordion element is with pure html:

<details open>
  <summary>Click here</summary>
  <p>These are the details</p>
</details>
Enter fullscreen mode Exit fullscreen mode

And you just toggle the open attribute on the details element to open and close it. The arrow marker can be customized using the css pseudo element ::marker to set the color, font size, etc.

Collapse
sergiybabich profile image
Sergiy Babich Author

Yet it is not transforming to tabs with CSS.
This is pure demo of CSS capabilities, not a practical guide to use in your projects.