Accordion

Content for item one.

Content for item two.

Simple Accordion

Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

Professional Design

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.

View example's code

<div class="accordion accordion-wrapper" id="accordionSimpleExample">
  <div class="card plain accordion-item">
    <div class="card-header" id="headingSimpleOne">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseSimpleOne" aria-expanded="true" aria-controls="collapseSimpleOne"> Professional Design </button>
    </div>
    <!--/.card-header -->
    <div id="collapseSimpleOne" class="accordion-collapse collapse show" aria-labelledby="headingSimpleOne" data-bs-parent="#accordionSimpleExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
  <div class="card plain accordion-item">
    <div class="card-header" id="headingSimpleTwo">
      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleTwo" aria-expanded="false" aria-controls="collapseSimpleTwo"> Top-Notch Support </button>
    </div>
    <!--/.card-header -->
    <div id="collapseSimpleTwo" class="accordion-collapse collapse" aria-labelledby="headingSimpleTwo" data-bs-parent="#accordionSimpleExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
  <div class="card plain accordion-item">
    <div class="card-header" id="headingSimpleThree">
      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleThree" aria-expanded="false" aria-controls="collapseSimpleThree"> Header and Slider Options </button>
    </div>
    <!--/.card-header -->
    <div id="collapseSimpleThree" class="accordion-collapse collapse" aria-labelledby="headingSimpleThree" data-bs-parent="#accordionSimpleExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
</div>
<!--/.accordion -->

Accordion with Background

Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

Professional Design

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.

View example's code

<div class="accordion accordion-wrapper" id="accordionExample">
  <div class="card accordion-item">
    <div class="card-header" id="headingOne">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>
    </div>
    <!--/.card-header -->
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
  <div class="card accordion-item">
    <div class="card-header" id="headingTwo">
      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>
    </div>
    <!--/.card-header -->
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
  <div class="card accordion-item">
    <div class="card-header" id="headingThree">
      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>
    </div>
    <!--/.card-header -->
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
</div>
<!--/.accordion -->

Accordion with Icon

Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

Secure Payments

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.

View example's code

<div class="accordion accordion-wrapper" id="accordionIconExample">
  <div class="card accordion-item icon">
    <div class="card-header" id="headingIconOne">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseIconOne" aria-expanded="true" aria-controls="collapseIconOne"><span><i class="uil uil-shield-exclamation"></i></span>Secure Payments</button>
    </div>
    <!--/.card-header -->
    <div id="collapseIconOne" class="accordion-collapse collapse show" aria-labelledby="headingIconOne" data-bs-parent="#accordionIconExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
  <div class="card accordion-item icon">
    <div class="card-header" id="headingIconTwo">
      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIconTwo" aria-expanded="false" aria-controls="collapseIconTwo"><span><i class="uil uil-check-circle"></i></span>Daily Updates</button>
    </div>
    <!--/.card-header -->
    <div id="collapseIconTwo" class="accordion-collapse collapse" aria-labelledby="headingIconTwo" data-bs-parent="#accordionIconExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
  <div class="card accordion-item icon">
    <div class="card-header" id="headingIconThree">
      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIconThree" aria-expanded="false" aria-controls="collapseIconThree"><span><i class="uil uil-chart-line"></i></span>Market Research</button>
    </div>
    <!--/.card-header -->
    <div id="collapseIconThree" class="accordion-collapse collapse" aria-labelledby="headingIconThree" data-bs-parent="#accordionIconExample">
      <div class="card-body">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
      </div>
      <!--/.card-body -->
    </div>
    <!--/.accordion-collapse -->
  </div>
  <!--/.accordion-item -->
</div>
<!--/.accordion -->

Project Pages

Single Projects

Usage

Styleguide

Elements

Accordion

Item One

Item Two

Simple Accordion

Accordion with Background

Accordion with Icon