📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › HTML Fundamentals › Details and Summary

Details and Summary

3 min read Quiz at the end
details and summary create a native accordion without JavaScript. Click summary to toggle the content panel. Use the open attribute for initially expanded panels. Style the arrow with summary::marker in CSS.

Accordion without JavaScript

<details>
    <summary>Click to expand</summary>
    <p>Hidden content here!</p>
</details>

<details open>
    <summary>Open by default</summary>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</details>
Topic Quiz · 5 questions

Test your understanding before moving on

1. What does <details> create?
💡 <details> creates a native HTML disclosure widget — expand/collapse without JavaScript.
2. What does <summary> provide?
💡 <summary> is the visible clickable heading inside <details>.
3. How do you make <details> open by default?
💡 The open attribute makes <details> expanded when the page loads.
4. Do you need JavaScript for <details>?
💡 <details> and <summary> work as an accordion with zero JavaScript.
5. What is the main advantage of <details>?
💡 <details> provides accessible accordion functionality with native HTML and no JavaScript.