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.
Instead, by slightly modifying the structure of the basic disclosure pattern and adding some light JavaScript event handling, it’s possible to create the desired experience in a valid, accessible way.
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>
