Fhenix Africa - Modern & Multipurpose Bootstrap 5 Template

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.

Talent Outsourcing

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>Talent Outsourcing</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>Co-workspace</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>Training Consultancy</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 -->

Usage

Styleguide

Elements

Accordion

Simple Accordion

Accordion with Background

Accordion with Icon

Think unique and be creative. Make a difference with Fhenix Africa.