NATIVE HTML DETAILS ELEMENT STYLED VIA CSS

Author:

  • Jachym Janousek
  • January 12, 2021

Made with:

  • HTML / CSS (SCSS)

About the code:

This is an amazing and cool implementation of an accordion-like component using only the details/summary native HTML element and CSS for styling. Best results can be seen in Chrome or Blink-based browsers. Firefox and others have decent results as well, but they could be improved creating alternative open/close icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: Yes

Dependencies:

Download Demo and Code Dribbble Page