HTML5: Use details and summary Tags for Native Accordions

No JavaScript or libraries needed for accordions. HTML5 has native collapsible elements.

Basic Accordion:

<details>
    <summary>Click to expand</summary>
    <p>Hidden content here. Shows when user clicks.</p>
</details>

Open by Default:

<details open>
    <summary>Already expanded</summary>
    <p>Content visible on load.</p>
</details>

Style It:

summary {
    cursor: pointer;
    font-weight: bold;
    padding: 10px;
    background: #f0f0f0;
}

summary:hover {
    background: #e0e0e0;
}

Fully accessible, keyboard navigable, and works everywhere!

HTML5 — Outside Still Submits

Post Views: 5