About This Example
The following example demonstrates using the Disclosure Pattern to create an
expandable card.
Authors sometimes want to display a summary of content in a collapsed disclosure that includes content that is more rich or complex than a plain text summary.
In addition, they may want to enable users of pointing devices to toggle the expanded state by clicking anywhere within the visible boundaries of the collapsed summary.
Authors may assume these goals can be achieved by nesting the entire rich summary within a disclosure button. However, doing so can:
-
Make the accessible label of the disclosure button cumbersome, inaccurate, or disorienting.
-
Result in invalid HTML, since
the
<button> element
only permits phrasing content.
The following example avoids these problems by modifying the structure
of the basic disclosure pattern. Instead of having the entire summary
contained within a button that controls a separate details container,
it nests the expand and collapse disclosure button within an article
element that presents a card. When the card is collapsed, it presents
a rich summary and the disclosure button. When the card is expanded,
its content also includes the additional details content. This
structure allows the summary to include headings, links, or any other
type of rich content while also enabling the disclosure button to have
a concise, understandable accessible name. Finally, some light
JavaScript makes the entire card clickable, so its pointer
interactions are similar to the summary of a basic disclosure.
Similar examples include:
HTML Source Code
To copy the following HTML code, please open it in CodePen.
<div class="disclosure-cards">
<h3 id="conference-heading">
Musical Education Conference
</h3>
<ol class="sessions" aria-labelledby="conference-heading">
<li>
<article class="disclosure-card session" aria-labelledby="symphonic-structure">
<header>
<hgroup>
<h4 id="symphonic-structure">
Symphonic Structure: Form, Function, and Feeling
</h4>
<p>
Ludwig van Beethoven
</p>
</hgroup>
<p>
<span class="location">
7 AM in Theater an der Wien
</span>
<button id="toggle-symphonic-structure"
aria-labelledby="symphonic-structure toggle-symphonic-structure"
aria-expanded="false"
aria-controls="details-symphonic-structure"
type="button">
<svg role="image"
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
fill="none"></circle>
<polyline points="7,10 12,15 17,10"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"></polyline>
</svg>
Details
</button>
</p>
</header>
<div id="details-symphonic-structure"
class="details"
inert="">
<div class="description">
<p>
Beethoven invites you to uncover the architectural
principles that make a composition — or a curriculum —
sing. He compares
<a href="#" onclick="alert('This is just for demo purposes'); return false;">
symphonic form
</a>
to effective educational frameworks,
emphasizing how recurring motifs and variations foster
retention, engagement, and deep emotional resonance. He
asserts that structure should never constrain passion;
rather, it channels it into something truly enduring.
</p>
<p>
Blending musical theory with pedagogical insight,
Beethoven encourages educators to embrace contrast,
conflict, and resolution in their lesson planning. Just
as the second movement of a symphony can be a quiet
reflection following a turbulent first, so too should
pacing and emotional cadence be considered in designing
impactful learning experiences.
</p>
</div>
<form>
<h5>
Session registration
</h5>
<label>
<input type="checkbox">
I’d like a transcript of this session
</label>
<button type="button" onclick="alert('This is just for demo purposes'); return false;">
Book a seat
</button>
</form>
</div>
</article>
</li>
<li>
<article class="disclosure-card session" aria-labelledby="folk-futures">
<header>
<hgroup>
<h4 id="folk-futures">
Folk Futures: Tradition in the Classroom
</h4>
<p>
Antonín Dvořák
</p>
</hgroup>
<p>
<span class="location">
8 AM in Rudolfinum Hall
</span>
<button id="toggle-folk-futures"
aria-labelledby="folk-futures toggle-folk-futures"
aria-expanded="false"
aria-controls="details-folk-futures"
type="button">
<svg role="image"
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
fill="none"></circle>
<polyline points="7,10 12,15 17,10"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"></polyline>
</svg>
Details
</button>
</p>
</header>
<div id="details-folk-futures"
class="details"
inert="">
<div class="description">
<p>
Dvořák explores the power of cultural roots in modern
music education, drawing from his own deep connection to
the folk melodies of Bohemia. He demonstrates how
incorporating
<a href="#" onclick="alert('This is just for demo purposes'); return false;">
regional traditions
</a>
into teaching not only
diversifies students’ musical vocabulary, but fosters a
sense of identity and continuity across generations.
Through examples from his own works, he illustrates how
authenticity can coexist with innovation.
</p>
<p>
Attendees will learn strategies to weave traditional
forms into contemporary curricula, using rhythm,
language, and storytelling as tools of engagement.
Dvořák makes the case that honoring heritage doesn’t
mean resisting progress—instead, it provides a vibrant
foundation on which students can build their own musical
voices.
</p>
</div>
<form>
<h5>
Session registration
</h5>
<label>
<input type="checkbox">
I’d like a transcript of this session
</label>
<button type="button" onclick="alert('This is just for demo purposes'); return false;">
Book a seat
</button>
</form>
</div>
</article>
</li>
<li>
<article class="disclosure-card session" aria-labelledby="playful-dissonance">
<header>
<hgroup>
<h4 id="playful-dissonance">
Playful Dissonance: Teaching with Wit and Wonder
</h4>
<p>
Francis Poulenc
</p>
</hgroup>
<p>
<span class="location">
9 AM in Église Saint-Roch
</span>
<button id="toggle-playful-dissonance"
aria-labelledby="playful-dissonance toggle-playful-dissonance"
aria-expanded="false"
aria-controls="details-playful-dissonance"
type="button">
<svg role="image"
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
fill="none"></circle>
<polyline points="7,10 12,15 17,10"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"></polyline>
</svg>
Details
</button>
</p>
</header>
<div id="details-playful-dissonance"
class="details"
inert="">
<div class="description">
<p>
Poulenc brings charm and surprise to the spotlight,
making a compelling case for
<a href="#" onclick="alert('This is just for demo purposes'); return false;">
humor as pedagogy
</a>
. Through anecdotes, musical
excerpts, and sly asides, he reveals how wit and whimsy
can disarm resistance and unlock creativity in learners
of all ages. He shows that even dissonance, when
playfully framed, becomes an invitation rather than a
disruption.
</p>
<p>
This session challenges the notion that music education
must be rigid or overly serious. Poulenc encourages
instructors to embrace imperfection, joy, and even
contradiction in their teaching. The result? A classroom
atmosphere that not only nurtures skill but sparks
lifelong curiosity and delight.
</p>
</div>
<form>
<h5>
Session registration
</h5>
<label>
<input type="checkbox">
I’d like a transcript of this session
</label>
<button type="button" onclick="alert('This is just for demo purposes'); return false;">
Book a seat
</button>
</form>
</div>
</article>
</li>
</ol>
</div>
