v1.6.0
    • Get started

      Install the package, load its styles and components, and build your first page.

    • Foundations

      The content guide, CSS utilities, tokens, and the principles behind every pattern.

    • Patterns

      Every pattern with a live example, when to use it, and where it's already in use.

    Details

    Collapse a section of content under a heading.

    When to use

    Use this when your content would benefit from collapsing a section of content under its heading. People should have a good idea of whether to open it by the heading alone, so be sure that the heading is descriptive of the contents within it.

    For a group of related sections, also use the accordion pattern.

    When to consider something else

    When possible, consider editing down your content for it not to need this details pattern. Collapsed content can make it harder for people to discover what they're looking for as now they need to interact with the page rather than scrolling. Consider reviewing the content foundation.

    How to use

    Write a summary heading that says what's inside. People open a section based on its label, so name it for the content (e.g., not "view more").

    Default

    <div class="pl-reset pl-typeset pl-margin-l">
      <details class="pl-details">
        <summary class="pl-details__summary"><h3>Biographical / Historical</h3></summary>
        <div class="pl-details__content">
          <p>John Wilbur (1774-1856) of Hopkinton, Rhode Island, married Lydia Collins in 1793. He became an Elder at age 28 and a Minister in 1812, advocating for conservative Quaker principles. He undertook two religious journeys to Britain, in 1831-33 and 1853-54. His sustained opposition to Joseph John Gurney led to his disownment in 1843 and the subsequent 1845 separation of New England Yearly Meeting into Gurneyite and Wilburite factions.</p>
        </div>
      </details>
    </div>
    

    Where it's used

    This pattern is not in use yet.

    Design System

    Get started Foundations Patterns Release notes · v1.6.0 Design notes