Skip to content
WebTricks

CSS-only accordion

A collapsible accordion built from the native details element, styled with a rotating marker — no JavaScript.

  • accordion
  • details
  • disclosure
  • collapse
  • no-js
Accent#7c5cff
Corner radius10px
HTML 
<details class="accordion" open><summary>What is this?</summary><div class="accordion__body">A collapsible section built on the native &lt;details&gt; element. Click the title to toggle it — no JavaScript needed.</div></details>
CSS 
:root {
    --accent: #7c5cff;
    --radius: 10px;
}

.accordion {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    list-style: none;            /* hide default triangle (Firefox) */
}

.accordion summary::-webkit-details-marker {
    display: none;               /* hide default triangle (WebKit) */
}

.accordion summary::after {
    content: "+";
    color: var(--accent);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.accordion[open] summary::after {
    transform: rotate(45deg);    /* "+" becomes "×" */
}

.accordion__body {
    padding: 0 16px 16px;
    color: rgba(255, 255, 255, 0.85);
}

How it works

The native <details>/<summary> elements give you open/close behaviour for free — no JavaScript, accessible by default, and toggled by click or keyboard.

  • The default disclosure triangle is hidden (list-style: none plus the WebKit ::-webkit-details-marker rule) and replaced with a + in summary::after.
  • When the element is open, [open] summary::after rotates the + 45° into a close icon.
  • Add the open attribute to have a panel expanded on load (as in the demo).

For a group where opening one closes the others, give each <details> the same name attribute — the browser handles the exclusivity natively.