Bootstrap 4 Accordion

2048 18 January 2020

No Description Available

Abhishek Singh

~ onex

Related Elements

2047
0
0

Bootstarp 3 Accordion

onex

1347
1
0

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

Bootstrap Collapse or Accordio

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

Bootstarp 3 Accordion

Bootstrap Collapse or Accordio

Bootstrap Collapse with Plus-m

Resourse

Log in