DEV Community

Discussion on: Accordion Tabs with pure CSS

View post
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 •

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.