Accordion

The Accordion component is a collapsible element that allows users to hide or reveal content in a vertical layout. It is useful for managing large amounts of content in a compact space.

How They Work

Accordions allow users to toggle the visibility of content sections. Each section can be expanded or collapsed individually.

Output:

Accordient 1

Content for section 1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, id, sunt! Ipsam amet eos accusamus, provident adipisci voluptatem, eveniet assumenda velit quisquam error vero nam quae soluta eius sunt beatae perspiciatis at explicabo possimus, quia. Distinctio molestias praesentium eligendi omnis.

Accordient 2

Content for section 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi est animi, dolores officia eveniet velit expedita fugiat modi perspiciatis excepturi nostrum delectus adipisci doloremque porro, ea voluptatem quidem non voluptas repellendus magnam ipsa ratione sapiente, ex! Repudiandae, saepe aperiam magni!

Accordient 3

Content for section 3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti numquam pariatur quos itaque, atque, maxime porro optio odio tenetur! Blanditiis, omnis aperiam minus odio magnam quam ut velit praesentium totam, qui at sit, reiciendis laborum dolores est ullam minima, consectetur.

            
<div class="accordion" id="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Accordion 1</div>
    <div class="accordion-content">
      <p>Content for section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Accordion 2</div>
    <div class="accordion-content">
      <p>Content for section 2.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Accordion 3</div>
    <div class="accordion-content">
      <p>Content for section 3.</p>
    </div>
  </div>
</div>
            
          

Outline Accordion

The Outline Accordion component offers a collapsible element with a distinct border and no background color, making it ideal for minimalistic designs.

Output:

Accordient Outline 1

Content for section 1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, id, sunt! Ipsam amet eos accusamus, provident adipisci voluptatem, eveniet assumenda velit quisquam error vero nam quae soluta eius sunt beatae perspiciatis at explicabo possimus, quia. Distinctio molestias praesentium eligendi omnis.

Accordient Outline 2

Content for section 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi est animi, dolores officia eveniet velit expedita fugiat modi perspiciatis excepturi nostrum delectus adipisci doloremque porro, ea voluptatem quidem non voluptas repellendus magnam ipsa ratione sapiente, ex! Repudiandae, saepe aperiam magni!

Accordient Outline 3

Content for section 3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti numquam pariatur quos itaque, atque, maxime porro optio odio tenetur! Blanditiis, omnis aperiam minus odio magnam quam ut velit praesentium totam, qui at sit, reiciendis laborum dolores est ullam minima, consectetur.

            
<div class="accordion accordion-outline" id="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Accordion Outline 1</div>
    <div class="accordion-content">
      <p>Content for section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Accordion Outline 2</div>
    <div class="accordion-content">
      <p>Content for section 2.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Accordion Outline 3</div>
    <div class="accordion-content">
      <p>Content for section 3.</p>
    </div>
  </div>
</div>
            
          

Always Open First Accordion

The Always Open First Accordion component ensures that the first section is always visible when the page loads, providing an immediate overview to users. The first section maintains an open class to keep it always expanded.

Output:

Accordient 1

Content for section 1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, id, sunt! Ipsam amet eos accusamus, provident adipisci voluptatem, eveniet assumenda velit quisquam error vero nam quae soluta eius sunt beatae perspiciatis at explicabo possimus, quia. Distinctio molestias praesentium eligendi omnis.

Accordient 2

Content for section 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi est animi, dolores officia eveniet velit expedita fugiat modi perspiciatis excepturi nostrum delectus adipisci doloremque porro, ea voluptatem quidem non voluptas repellendus magnam ipsa ratione sapiente, ex! Repudiandae, saepe aperiam magni!

Accordient 3

Content for section 3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti numquam pariatur quos itaque, atque, maxime porro optio odio tenetur! Blanditiis, omnis aperiam minus odio magnam quam ut velit praesentium totam, qui at sit, reiciendis laborum dolores est ullam minima, consectetur.

            
<div class="accordion" id="accordion">
  <div class="accordion-item open">
    <div class="accordion-header">Accordion 1</div>
    <div class="accordion-content">
      <p>Content for section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Accordion 2</div>
    <div class="accordion-content">
      <p>Content for section 2.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Accordion 3</div>
    <div class="accordion-content">
      <p>Content for section 3.</p>
    </div>
  </div>
</div>