Articles


How to create a simple accordion using Bootstrap?

How to create a simple accordion using Bootstrap?



Posted bysivaprasad,27th Mar 2017

Accordions are very useful GUI (Graphical user interface) element when toggle between  showing and hiding the data. We can make a basic Accordion with  Bootstrap simple collapsible panel without using any JavaScript code. Here is a sample code to create a simple accordion structure :

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Sample Accordion</p>
  <div class="accordion" data-toggle="collapse" data-target="#demo1">Accordion1</div>
  <div id="demo1" class="collapse">
    Hi this is a sample Accordion1
  </div>
  <div class="accordion" data-toggle="collapse" data-target="#demo2">Accordion2</div>
  <div id="demo2" class="collapse">
    Hi this is a sample Accordion2
  </div>
</div>