<details> and <summary>

The <details> and <summary> elements are used to allow common accordion-style functionality without relying on JavaScript.

Making it better

With a little help from JavaScript, we can supplement the default behavior to make an accordion that is super smooth and nicely-styled, but still degrades gracefully.

This accordion uses JS to calculate heights so we can use CSS transitions without any max-height hacks. It also sets a timeout before removing the `open` attribute, so the content of the `<details>` element will stay visible until the height transition is finished.

The cool part is that since we’re using these modern HTML5 elements, the accordion should work just fine even with JavaScript disabled. Gasp! A simple web component in 2018 that doesn’t completely fail without JS?! Sound the alarm!

Settings

- `speed` (default: `300` ) Speed of the transition in milliseconds. Setting this in the plugin will override the value specified in the CSS.
- `one_visible` (default: `false` ) Determines whether details can be toggled independently, or if only one can be visible at a time.

Shameless Plug

If you liked this pen, check out my portfolio site . I’m accepting new projects all the time, so drop me a line.