Accordion - Baseline UI

Basic Usage

Accordions allow users to expand and collapse content sections.

This is the content of the first accordion item. It contains detailed information that can be expanded or collapsed.

This is the content of the second accordion item. Multiple items can be open at the same time by default.

This is the content of the third accordion item. Click the header to toggle the content visibility.

HTML

<div class="bl-accordion">
  <div class="bl-accordion-item">
    <button class="bl-accordion-header">
      <span>Accordion Item 1</span>
      <span class="bl-accordion-icon"><i class="fas fa-chevron-down"></i></span>
    </button>
    <div class="bl-accordion-body">
      Content goes here...
    </div>
  </div>
</div>

Open Item

Add bl-accordion-open class to open an item by default.

This accordion item is open by default with the bl-accordion-open class.

This item is closed by default. Click to expand.

HTML

<div class="bl-accordion-item bl-accordion-open">
  <button class="bl-accordion-header">
    <span>Open by Default</span>
    <span class="bl-accordion-icon"><i class="fas fa-chevron-down"></i></span>
  </button>
  <div class="bl-accordion-body">
    Content...
  </div>
</div>

Flush Variant

Remove the outer borders and rounded corners with bl-accordion-flush.

Flush accordions have no outer borders, creating a seamless look.

Perfect for integrating accordions into other components.

HTML

<div class="bl-accordion bl-accordion-flush">
  <div class="bl-accordion-item">...</div>
</div>

Single Open Mode

Add bl-accordion-single to allow only one item to be open at a time.

Only one item can be open at a time in single mode.

Opening this will close the other item automatically.

This ensures focused content presentation.

HTML

<div class="bl-accordion bl-accordion-single">
  <div class="bl-accordion-item bl-accordion-open">...</div>
  <div class="bl-accordion-item">...</div>
</div>

Features

Glassmorphism Design: Beautiful glass effect with backdrop blur
Smooth Animations: Icon rotation and content slide animations
Keyboard Accessible: Full keyboard navigation support
Multiple Variants: Default, flush, and single-open modes
Flexible Content: Supports any HTML content in the body