HTML Academy · Lesson

details and summary Disclosure Widget

Build native expand/collapse components without JavaScript.

Lesson 3 of 413 steps

details and summary Disclosure Widget is a free HTML Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

What Are details and summary?

The <details> and <summary> elements create a native disclosure widget — an expand/collapse component — without any JavaScript:

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language
     used to create web pages.</p>
</details>

How It Works

Interaction behavior:

By default, only the <summary> is visible
Clicking the summary toggles the visibility of the remaining content
A disclosure triangle appears on the summary by default
No JavaScript required

The open Attribute

The open attribute pre-expands the details element:

<details open>
  <summary>Installation instructions</summary>
  <ol>
    <li>Download the installer</li>
    <li>Run the installer</li>
    <li>Restart your computer</li>
  </ol>
</details>
<!-- open is a boolean attribute: presence = expanded -->
<!-- Remove it to start collapsed -->

Building an FAQ

FAQ sections are a perfect use case:

<h2>Frequently Asked Questions</h2>

<details>
  <summary>Is HTML5 a programming language?</summary>
  <p>No. HTML5 is a markup language that defines the structure and meaning
     of web content. Programming languages like JavaScript add logic and behavior.</p>
</details>

<details>
  <summary>Do I need to close void elements?</summary>
  <p>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not require
     a closing slash. Both &lt;br&gt; and &lt;br /&gt; are valid.</p>
</details>

Styling details and summary

Customize the appearance:

details {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;   /* remove default triangle */
}

summary::before {
  content: '▶ ';      /* custom arrow */
}

details[open] > summary::before {
  content: '▼ ';      /* rotate when open */
}

Removing the Default Triangle

The disclosure triangle is applied with list-style:

/* Remove the default arrow: */
summary {
  list-style: none;
}

/* Firefox: */
summary::-webkit-details-marker {
  display: none;
}

/* Then add a custom indicator: */
summary::after {
  content: '+';
  float: right;
}
details[open] summary::after {
  content: '−';
}

toggle Event

Listen for open/close with the toggle event:

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Details opened');
    // Track analytics, load content, etc.
  } else {
    console.log('Details closed');
  }
});

Accordion with details

Build a basic accordion — only one panel open at a time:

/* Pure CSS accordion using details: */
/* Each item is a details element */
/* For exclusive open, use JavaScript: */

const allDetails = document.querySelectorAll('details');
allDetails.forEach(d => {
  d.addEventListener('toggle', () => {
    if (d.open) {
      allDetails.forEach(other => {
        if (other !== d) other.removeAttribute('open');
      });
    }
  });
});

Accessibility of details/summary

Built-in accessibility features:

summary receives keyboard focus and can be activated with Enter or Space
Screen readers announce the summary text and expansion state
The hidden content is in the DOM but announced as hidden until expanded

name Attribute for Exclusive Accordion

HTML 2025 adds name to details for native exclusive accordion:

<details name="faq">
  <summary>Question 1</summary>
  <p>Answer 1...</p>
</details>

<details name="faq">
  <summary>Question 2</summary>
  <p>Answer 2...</p>
</details>
<!-- details with the same name act as a group -->
<!-- Opening one closes the others automatically -->
<!-- Supported in Chrome 120+ and Firefox 130+ -->

Lazy Loading Content with toggle

Load content only when the details is opened:

<details id="advanced">
  <summary>Load advanced settings...</summary>
  <div id="advanced-content">Loading...</div>
</details>

<script>
const d = document.getElementById('advanced');
d.addEventListener('toggle', async () => {
  if (d.open) {
    const res = await fetch('/api/settings');
    const html = await res.text();
    document.getElementById('advanced-content').innerHTML = html;
    d.removeEventListener('toggle', arguments.callee);
  }
}, { once: true });
</script>

Quick Check

Which element provides the always-visible trigger text in a details disclosure widget?

Answer it in the interactive lesson

Recap: details and summary

Disclosure widget essentials:

<details> + <summary> — native expand/collapse, no JavaScript needed
open attribute — pre-expand
toggle event — react to open/close
Style with CSS; remove default triangle with list-style: none
name attribute — exclusive accordion (Chrome 120+)

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

Is the “details and summary Disclosure Widget” lesson free?

Yes — any 3 lessons of the HTML Academy learning path, including “details and summary Disclosure Widget”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

What will I learn in “details and summary Disclosure Widget”?

Build native expand/collapse components without JavaScript. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “details and summary Disclosure Widget” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy