Collapse Component

Classes: .collapsible, .collapse-item, .collapse-toggle, .collapse-content, .collapse-icon, collapse-indicator

Features:

• Fully customizable UI
• Single or multiple open panels at a time (by default)
• Make collapsible menu, navigation, accordion with ease

Example

Usage

<div class="collapsible">
  <div class="collapse-item">
      <a class="collapse-toggle">Section 1</a>
      <div class="collapse-content">Content 1</div>
  </div>

  <div class="collapse-item">
      <a class="collapse-toggle">Section 2</a>
      <div class="collapse-content">Content 2</div>
  </div>

  <div class="collapse-item">
      <a class="collapse-toggle">
          <span>Section 3</span>
          <span class="collapse-indicator">+</span>
      </a>
      <div class="collapse-content">Content 3</div>
  </div>

  <div class="collapse-item">
      <a class="collapse-toggle">
          <span>Section 3</span>
          <span class="collapse-indicator" data-open="▼" data-closed="►">►</span>
      </a>
      <div class="collapse-content">Content 3</div>
  </div>

  <div class="collapse-item">
      <a class="collapse-toggle">
          <span>Section 3</span>
          <span class="collapse-indicator" data-open="(hide)" data-closed="(show)">(show)</span>
      </a>
      <div class="collapse-content">Content 3</div>
  </div>

  <div class="collapse-item">
      <a class="collapse-toggle">
          <span>Section 3</span>
          <span class="collapse-indicator">
              <svg class="collapse-icon" width="1em" height="1em" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
                  <path d="M7 5l5 5-5 5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
          </span>
      </a>
      <div class="collapse-content">Content 3</div>
  </div>
</div>

To restrict only one open content at a time, declare data-collapse="accordion".

<div class="collapsible" data-collapse="accordion">