Bootstarp 3 Accordion

4007 20 January 2020

No Description Available

Abhishek Singh

~ onex

Related Elements

3982
0
0

Bootstrap 4 Accordion

onex

2123
1
0

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

Bootstrap Collapse or Accordio

onex

1371
1
0

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" style="margin-top:6rem">
          <div class="adp-card">
            <h4>Bootstarp 3 Accordion</h4>
            
            <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="accordion-btn" data-toggle="collapse" data-parent="#accordion" href="#collapse1"><span class="txt-clr">Day 1</span> | Night Safari: Arrival <span class="collapse-sign pull-right"><i class="fas fa-angle-up"></i></span>
                   <ul class="package-tags">
                        <li>Arival</li>
                        <li>Night Safari</li>
                    </ul>
                  </a>
                  
                </h4>
              </div>
              <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="accordion-btn" data-toggle="collapse" data-parent="#accordion" href="#collapse2"><span class="txt-clr">Day 2</span> | Madurai – Rameswaram (200 Kms 04 hrs drive)  <span class="collapse-sign pull-right"><i class="fas fa-angle-up"></i></span>
                   <ul class="package-tags">
                        <li>City Sightseein</li>
                    </ul></a>
                </h4>
              </div>
              <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="accordion-btn" data-toggle="collapse" data-parent="#accordion" href="#collapse3"><span class="txt-clr">Day 3</span> | Check out from the hotel and then check in to Cruise  <span class="collapse-sign pull-right"><i class="fas fa-angle-up"></i></span>
                   <ul class="package-tags">
                        <li>Cruise</li>
                    </ul></a>
                </h4>
              </div>
              <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </div>
            </div>
          </div> 
        </div>
    </div>
    </div>
</div>

Get HTML

Get CSS

Get JS

Bootstarp 3 Accordion

Abhishek Singh

Related Elements

Bootstrap 4 Accordion

Bootstrap Collapse or Accordio

Bootstrap Collapse with Plus-m

Resourse

Log in