Accordion

Item One

Content for item one.

Item Two

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.

<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.

<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.

<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 -->