Example Disclosure (Show/Hide) Card

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:

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:

Example

Musical Education Conference

  1. Symphonic Structure: Form, Function, and Feeling

    Ludwig van Beethoven

    7 AM in Theater an der Wien

    Beethoven invites you to uncover the architectural principles that make a composition — or a curriculum — sing. He compares symphonic form 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.

    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.

    Session registration
  2. Folk Futures: Tradition in the Classroom

    Antonín Dvořák

    8 AM in Rudolfinum Hall

    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 regional traditions 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.

    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.

    Session registration
  3. Playful Dissonance: Teaching with Wit and Wonder

    Francis Poulenc

    9 AM in Église Saint-Roch

    Poulenc brings charm and surprise to the spotlight, making a compelling case for humor as pedagogy. 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.

    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.

    Session registration

Accessibility Features

Keyboard Support

Key Function
Tab Moves keyboard focus to the disclosure button.
Space or
Enter
Activates the disclosure button, which toggles the expanded/collapsed state of the card.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
aria-controls="ID_REFERENCE" button Identifies the element controlled by the disclosure button.
aria-expanded="false" button
  • Indicates that the container controlled by the disclosure button is hidden.
  • CSS attribute selectors (e.g. [aria-expanded="false"]) are used to synchronize the visual states with the value of the aria-expanded attribute.
aria-expanded="true" button
  • Indicates that the container controlled by the disclosure button is visible.
  • CSS attribute selectors (e.g. [aria-expanded="true"]) are used to synchronize the visual states with the value of the aria-expanded attribute.
article article
  • This does not have to be declared in the code because it is implicit in the HTML article element.
  • Enables screen reader users to perceive the boundaries of each card and easily move a reading cursor from card to card.

JavaScript and CSS Source Code

HTML Source Code

To copy the following HTML code, please open it in CodePen.