Bordash - Admin Dashboard Template

Basic Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
              aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
      </button>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
         data-parent="#accordionExample">
      <div class="card-body">...</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
              data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Collapsible Group Item #2
      </button>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
         data-parent="#accordionExample">
      <div class="card-body">...</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
              data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Collapsible Group Item #3
      </button>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
         data-parent="#accordionExample">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

Custom Accordion Default

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem cumque distinctio dolor dolore dolorem dolores error fugit hic ipsam magnam magni maxime minima nobis officia omnis perspiciatis, quasi quis ratione sunt? Deserunt distinctio eligendi et ipsum obcaecati repudiandae. Aperiam at consequuntur dignissimos, dolorem eaque earum exercitationem fugit perspiciatis ratione veritatis? Ad culpa facere numquam? A architecto, aut cum deleniti dignissimos distinctio dolor dolores ducimus ea, error esse ex illum impedit ipsum maiores minima mollitia nihil odit officiis omnis repudiandae rerum saepe sapiente sed sint ullam vel velit veritatis vitae voluptatibus. Blanditiis harum laborum, magni nisi nulla provident quae rem!

Accordion 2

Accordion 3

<div class="accordion custom-accordion">
  <div class="accordion-row open">
    <a href="#" class="accordion-header">
      <span>Accordion 1</span>
      <i class="accordion-status-icon close fa fa-chevron-up"></i>
      <i class="accordion-status-icon open fa fa-chevron-down"></i>
    </a>
    <div class="accordion-body">...</div>
  </div>
  <div class="accordion-row">
    <a href="#" class="accordion-header">
      <span>Accordion 2</span>
      <i class="accordion-status-icon close fa fa-chevron-up"></i>
      <i class="accordion-status-icon open fa fa-chevron-down"></i>
    </a>
    <div class="accordion-body">...</div>
  </div>
  <div class="accordion-row">
    <a href="#" class="accordion-header">
      <span>Accordion 3</span>
      <i class="accordion-status-icon close fa fa-chevron-up"></i>
      <i class="accordion-status-icon open fa fa-chevron-down"></i>
    </a>
    <div class="accordion-body">...</div>
  </div>
</div>

Accordion Primary

Add the .accordion-primary class to use.

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.

Accordion 2

Accordion 3