Bootstrap 4 Accordion

1016 18 January 2020

No Description Available

Abhishek Singh

~ onex

Related Elements

1167
1
0

Toggle the visibility of content across your project with Bootstrap Collapse or Accordion.

Bootstrap Collapse or Accordio

onex

1015
0
0

Bootstarp 3 Accordion

onex

Hide and Show content of your project webpage with Bootstrap Collapse or Accordion.

Bootstrap Collapse with Plus-m

onex

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3 mt-5">
          <div class="card">
            <div class="card-body">
            <h4>Itinerary</h4>
            <div class="accordion" id="accordionExample">
              <div class="card">
                <div class="card-header" id="headingOne">
                  <h2 class="mb-0">
                    <button class="btn btn-link  adp-flex-btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="txt-clr">Day 1</span> | Night Safari: Arrival <span class="collapse-sign float-right"><i class="fas fa-angle-up"></i></span>
                    </button>
                    <ul class="package-tags">
                        <li>Arival</li>
                        <li>Night Safari</li>
                    </ul>
                  </h2>
                </div>
            
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                  <div class="card-body">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
                </div>
              </div>
              <div class="card">
                <div class="card-header" id="headingTwo">
                  <h2 class="mb-0">
                    <button class="btn btn-link collapsed adp-flex-btn" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="txt-clr">Day 2</span> | <span class="txt-hd">Check out from the hotel and then check </span> <span class="collapse-sign float-right"><i class="fas fa-angle-down"></i></span>
                    </button>
                  </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                  <div class="card-body">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
                </div>
              </div>
              
            </div>
          </div>
        </div>
    </div>
    </div>
</div>

Get HTML

Get CSS

Get JS

Bootstrap 4 Accordion

Abhishek Singh

Related Elements

Bootstrap Collapse or Accordio

Bootstarp 3 Accordion

Bootstrap Collapse with Plus-m

Resourse

Log in