← All elements
<div class="na"><details open><summary>Frontend</summary><details><summary>HTML</summary><p>Structure and meaning.</p></details><details><summary>CSS</summary><p>Layout, motion and theme.</p></details></details><details><summary>Backend</summary><p>Servers, data and APIs.</p></details></div>About this accordion
A two-level accordion made from details elements inside details, with a rotating chevron on each level.
How it works
Details elements are placed inside another details element, so each level opens and closes on its own. The summary markers are hidden and replaced with a rotating triangle drawn in ::after. The inner panels use a lighter background and smaller type to show hierarchy, and padding rather than margins keeps the spacing inside the box.
Ways to customise it
- Add open to any details to start it expanded.
- Change the greens for another palette.
- Add a third level by nesting another details.
Good to know
Native details elements are keyboard accessible and announced by screen readers. Do not nest too deeply, because it becomes hard to scan.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.