Lesson 19: Details

The details and summary tags give you a built-in way to expand and collapse content without writing JavaScript.

An expander widget hides details until a user clicks it. You often see this pattern on FAQ pages or mobile menus.

In the past, building these expanders required complex code. Today, the details and summary tags are fully supported by all modern browsers.

When a user clicks or taps a <summary> element, the parent <details> tag opens up. Keyboard users can also select the summary and press the Enter key to toggle it.

The open attribute#

The <details> tag is the wrapper and <summary> is the label. The summary stays visible all the time. When a user clicks it, the browser toggles the open attribute on the details tag, showing the rest of the contents.

If the open attribute is present in the HTML, the element starts expanded on page load. If you leave it off, the details start collapsed.

Because open is a standard HTML attribute, you can use it to style open and closed states in CSS.

In some browsers, users can search for text inside a collapsed details block. If the browser finds a match, it will automatically expand to show the text.

The <summary> must be the first child inside a <details> tag. The summary can contain plain text, inline HTML elements, or headings.

Styling the summary marker#

By default, the browser shows a small triangle next to the summary text. This triangle rotates when the details open.

If you want to customize the arrow, you can style it using CSS. Many developers choose to hide the default arrow and display their own icon instead.

details summary {
  list-style: none;
}

If you hide the default triangle, make sure to add some other clear visual indicator so users know the element is clickable.

Common mistakes#

If you forget to include the <summary> tag, the browser will create a default one labeled “details”. It’s always best to write your own summary so it looks and works consistently across all devices.

If you put the <summary> in the wrong place, the browser usually fixes it and renders it first anyway.

Avoid putting links or buttons inside your summary. Putting clickable things inside a clickable label can confuse the browser and screen readers.

Controlling details with scripts#

If you want to control details with scripts, JavaScript has access to the open property. You can use it to open or close the block automatically, or detect when a user toggles it.

You don’t need any scripts for basic expanders because the browser handles the open and closed states automatically.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).