Code Library of Accessibility Examples
Beta. Feedback welcome!

Expand/Collapse (based on Details/Summary)

Expand/Collapse (based on Details/Summary)

This pattern is nearly identical in intent to the plain Expand/Collapse pattern, except that it adds the HTML 5 semantics of the summary and details elements. The summary element is the button that controls the expand/collapse action. The details element contains the content that is hidden or shown as a result of activating the summary element.

In principle, the summary and details elements could work on their own, without any need for JavaScript or a custom ARIA pattern, but in practice, not all browsers support this feature, so JavaScript and ARIA are required for cross-browser compatibility.

Support Note: Works in every screen reader and browser combo except NVDA Firefox (it reads the initial state collapsed/expanded but does not announce the state change).


Turn on a screen reader to experience this example in action.

I Have a Dream (excerpt), by Dr. Martin Luther King

And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream.

I have a dream that one day this nation will rise up and live out the true meaning of its creed: “We hold these truths to be self-evident, that all men are created equal.”

I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.

I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom and justice.

I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.

I have a dream today!

I have a dream that one day, down in Alabama, with its vicious racists, with its governor having his lips dripping with the words of “interposition” and “nullification” — one day right there in Alabama little black boys and black girls will be able to join hands with little white boys and white girls as sisters and brothers.

I have a dream today!

I have a dream that one day every valley shall be exalted, and every hill and mountain shall be made low, the rough places will be made plain, and the crooked places will be made straight; and the glory of the Lord shall be revealed and all flesh shall see it together.

HTML Source Code

<details class="deque-expander" id="dream">
    <summary class="deque-expander-summary">
        <span class="expander-icon"></span>
        I Have a Dream (excerpt), by Dr. Martin Luther King
    </summary>

    <div class="deque-expander-content">
        <p>And so even though we face the difficulties of today and tomorrow,
            I still have a dream. It is a dream deeply rooted in the American dream.</p>

        <p>I have a dream that one day this nation will rise up and live out the
            true meaning of its creed: &ldquo;We hold these truths to be self-evident,
            that all men are created equal.&rdquo;</p>

        <p>I have a dream that one day on the red hills of Georgia, the sons of
            former slaves and the sons of former slave owners will be able to sit
            down together at the table of brotherhood.</p>

        <p>I have a dream that one day even the state of Mississippi, a state
            sweltering with the heat of injustice, sweltering with the heat of
            oppression, will be transformed into an oasis of freedom and justice.</p>

        <p>I have a dream that my four little children will one day live in a
            nation where they will not be judged by the color of their skin but
            by the content of their character.</p>

        <p>I have a dream today!</p>

        <p>I have a dream that one day, down in Alabama, with its vicious racists,
            with its governor having his lips dripping with the words of
            &ldquo;interposition&rdquo; and &ldquo;nullification&rdquo; &mdash; one day right there in Alabama
            little black boys and black girls will be able to join hands with little
            white boys and white girls as sisters and brothers.</p>

        <p>I have a dream today!</p>

        <p>I have a dream that one day every valley shall be exalted, and every
            hill and mountain shall be made low, the rough places will be made plain,
            and the crooked places will be made straight; and the glory of the Lord
            shall be revealed and all flesh shall see it together.</p>
    </div>
</details>

JavaScript Source Code

/*
  No JavaScript is required for this component.

  The native HTML <details> and <summary> elements provide
  expand/collapse functionality, keyboard support (Enter/Space),
  and screen reader announcements automatically.
*/

CSS Source Code

/*
  Expand/Collapse (Summary/Details) — Restyled
  Deque University ARIA Component
*/

.deque-expander {
  --dqu-bg-primary: #fcfaf8;
  --dqu-border-secondary: #8c827d;
  --dqu-interactive: #2e5f7a;
  --dqu-interactive-hover: #3a7a9a;
  --dqu-font-family: "Noto Sans", sans-serif;
  --dqu-radius: 8px;

  margin: 0;
  padding: 0;
  border: 1px solid var(--dqu-border-secondary);
  border-radius: var(--dqu-radius);
  font-family: var(--dqu-font-family);
  overflow: hidden;
}

.deque-expander:focus-within {
  border-color: var(--dqu-interactive);
  box-shadow: 0 0 0 1px var(--dqu-interactive);
}

/* Base specificity raised to 0,2,0 to beat deque-patterns.min.css rules
   (.deque-expander .deque-expander-summary) which load before this file */
.deque-expander .deque-expander-summary {
  display: block;
  border: 0;
  padding: 12px 16px 12px 40px !important;
  color: #ffffff !important;
  text-align: left;
  background: var(--dqu-interactive) !important;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  transition: background-color 0.15s ease;
  border-radius: 7px 7px 0 0 !important;
}

/* Hide native marker/disclosure triangle */
.deque-expander .deque-expander-summary::-webkit-details-marker {
  display: none;
}

.deque-expander .deque-expander-summary::marker {
  display: none;
  content: "";
}

.deque-expander .deque-expander-summary:hover {
  cursor: pointer;
  background: var(--dqu-interactive-hover) !important;
  outline: none !important;
}

.deque-expander .deque-expander-summary:active {
  cursor: pointer;
  background: #254c62 !important;
}

.deque-expander .deque-expander-summary:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 3px #ffffff;
  background: var(--dqu-interactive-hover) !important;
}

.deque-expander .deque-expander-summary:focus:not(:focus-visible) {
  outline: none !important;
}

/* Closed state: all four corners rounded */
.deque-expander:not([open]) > .deque-expander-summary {
  border-radius: 7px !important;
}

/* CSS chevron icon */
.deque-expander-summary .expander-icon {
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  height: 0.5rem;
  width: 0.5rem;
  pointer-events: none;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-60%) rotate(-45deg);
  transition: transform 0.2s ease;
}

/* Rotate chevron when open */
details[open] > .deque-expander-summary .expander-icon {
  transform: translateY(-60%) rotate(45deg);
}


.deque-expander-content {
  clear: both;
  padding: 16px;
  background: var(--dqu-bg-primary);
  color: #21201e;
  font-size: 0.9375rem;
  line-height: 1.7;
}

Copy and Paste Full Page Example