Multi-Column Accordion

Two independent accordion columns with native keyboard and touch controls.

Open demo ↗

What can this module contain?

Text, lists, images and links can appear in each panel.

Can more than one item stay open?

Yes. Each panel is independent in this example.

Does it work without JavaScript?

Yes. Native details and summary elements provide the interaction.

How do I change the styling?

Override the component styles in assets/custom/custom.css.

How does it behave on mobile?

The columns stack in their original reading order.

Can I reuse this section?

Copy its HTML and retain the shared stylesheet.

HTML source & reuse instructions

Include the shared CSS and JavaScript files. Rename copied IDs and their matching references.


<div class="lab-grid two">
<div>
<details class="cp-disclosure">
<summary>
          What can this module contain?
         </summary>
<p>
          Text, lists, images and links can appear in each panel.
         </p>
</details>
<details class="cp-disclosure">
<summary>
          Can more than one item stay open?
         </summary>
<p>
          Yes. Each panel is independent in this example.
         </p>
</details>
<details class="cp-disclosure">
<summary>
          Does it work without JavaScript?
         </summary>
<p>
          Yes. Native details and summary elements provide the interaction.
         </p>
</details>
</div>
<div>
<details class="cp-disclosure">
<summary>
          How do I change the styling?
         </summary>
<p>
          Override the component styles in assets/custom/custom.css.
         </p>
</details>
<details class="cp-disclosure">
<summary>
          How does it behave on mobile?
         </summary>
<p>
          The columns stack in their original reading order.
         </p>
</details>
<details class="cp-disclosure">
<summary>
          Can I reuse this section?
         </summary>
<p>
          Copy its HTML and retain the shared stylesheet.
         </p>
</details>
</div>
</div>