Collapsible Sections

A collapsible section uses the native <details> element to show or hide content behind an expandable header built with Section markup.

Examples

Basic

Use .ro-collapsible-section on <details> with .ro-collapsible-section-header on <summary>. Include .ro-collapsible-section-toggle for the chevron and .ro-collapsible-section-body for the panel content.

<details class="ro-collapsible-section">
  <summary class="ro-collapsible-section-header">
    <header class="ro-section-header">
      <div class="ro-section-header-main">
        <div class="ro-section-title">
          <div class="ro-section-title-wrapper">
            <h4 class="ro-heading ro-level-4">Section title</h4>
          </div>
        </div>
      </div>
    </header>
    <i class="ro-icon ro-icon-chevron-bottom-small ro-size-lg ro-collapsible-section-toggle" aria-hidden="true"></i>
  </summary>
  <div class="ro-section-body ro-collapsible-section-body">
    <p>Collapsible content goes here.</p>
  </div>
</details>

Preview

Section title

Collapsible content goes here.

Stacked list (auto dividers)

Place multiple .ro-collapsible-section elements as siblings. SCSS adds a top border on every section after the first (.ro-collapsible-section + .ro-collapsible-section) — no manual .ro-divider required.

<details class="ro-collapsible-section">
  <summary class="ro-collapsible-section-header">
    <header class="ro-section-header">
      <div class="ro-section-header-main">
        <div class="ro-section-title">
          <div class="ro-section-title-wrapper">
            <h4 class="ro-heading ro-level-4">General</h4>
          </div>
        </div>
      </div>
    </header>
    <i class="ro-icon ro-icon-chevron-bottom-small ro-size-lg ro-collapsible-section-toggle" aria-hidden="true"></i>
  </summary>
  <div class="ro-section-body ro-collapsible-section-body">
    <p>Account name, language, and timezone settings.</p>
  </div>
</details>

<details class="ro-collapsible-section">
  <summary class="ro-collapsible-section-header">
    <header class="ro-section-header">
      <div class="ro-section-header-main">
        <div class="ro-section-title">
          <div class="ro-section-title-wrapper">
            <h4 class="ro-heading ro-level-4">Notifications</h4>
          </div>
        </div>
      </div>
    </header>
    <i class="ro-icon ro-icon-chevron-bottom-small ro-size-lg ro-collapsible-section-toggle" aria-hidden="true"></i>
  </summary>
  <div class="ro-section-body ro-collapsible-section-body">
    <p>Email and push notification preferences.</p>
  </div>
</details>

<details class="ro-collapsible-section">
  <summary class="ro-collapsible-section-header">
    <header class="ro-section-header">
      <div class="ro-section-header-main">
        <div class="ro-section-title">
          <div class="ro-section-title-wrapper">
            <h4 class="ro-heading ro-level-4">Security</h4>
          </div>
        </div>
      </div>
    </header>
    <i class="ro-icon ro-icon-chevron-bottom-small ro-size-lg ro-collapsible-section-toggle" aria-hidden="true"></i>
  </summary>
  <div class="ro-section-body ro-collapsible-section-body">
    <p>Password, two-factor authentication, and sessions.</p>
  </div>
</details>

Preview

General

Account name, language, and timezone settings.

Notifications

Email and push notification preferences.

Security

Password, two-factor authentication, and sessions.

With Actions

<details class="ro-collapsible-section" open>
  <summary class="ro-collapsible-section-header">
    <header class="ro-section-header">
      <div class="ro-section-header-main">
        <div class="ro-section-title">
          <span class="ro-title-leading">
            <i class="ro-icon ro-icon-rocket ro-size-lg" aria-hidden="true"></i>
          </span>
          <div class="ro-section-title-wrapper">
            <h4 class="ro-heading ro-level-4">With actions</h4>
            <div class="ro-section-subtitle"><span>Subtitle</span></div>
          </div>
        </div>
        <div class="ro-section-actions">
          <button type="button" class="ro-btn ro-size-sm ro-shape-icon ro-color-scheme-neutral ro-variant-ghost" aria-label="Info">
            <i class="ro-icon ro-icon-info-circle ro-style-regular ro-size-lg" aria-hidden="true"></i>
          </button>
          <div class="ro-chip ro-color-scheme-success ro-size-sm">
            <span class="ro-chip-text">4</span>
          </div>
          <button type="button" class="ro-btn ro-size-sm ro-shape-icon ro-color-scheme-neutral ro-variant-ghost" aria-label="Remove">
            <i class="ro-icon ro-icon-minus-circle ro-style-regular ro-size-lg" aria-hidden="true"></i>
          </button>
          <button type="button" class="ro-btn ro-size-sm ro-shape-icon ro-color-scheme-neutral ro-variant-ghost" aria-label="Add">
            <i class="ro-icon ro-icon-plus-circle ro-style-regular ro-size-lg" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </header>
    <i class="ro-icon ro-icon-chevron-bottom-small ro-size-lg ro-collapsible-section-toggle" aria-hidden="true"></i>
  </summary>
  <div class="ro-section-body ro-collapsible-section-body">
    <p>Collapsible content goes here.</p>
  </div>
</details>

Preview

With actions

Subtitle

4

Collapsible content goes here.

Automatic body indent

When the summary includes .ro-title-leading (icon or avatar before the title), the collapsible body is indented automatically via SCSS. There is no separate opt-out class — adjust markup if you need a flush layout.

Properties

Class / state	Description
.ro-collapsible-section	Styles the <details> wrapper. Adjacent siblings (.ro-collapsible-section + .ro-collapsible-section) get an automatic top border.
.ro-collapsible-section-header	Summary row with hover background.
.ro-collapsible-section-toggle	Chevron icon; rotates 180° when [open].
.ro-section-body.ro-collapsible-section-body	Content area below the header.
.ro-size-sm	Reduced header padding.
.ro-title-leading in summary	Triggers automatic body indent when present.