Accordion toggle using Jquery with Bootstrap

Accordion toggle is new style of toggle, this accordion is mostly using for FAQ and design features, so this kind of toggle is make the web page as very attractive, and here we are going to use this with Bootstrap plugin. let see the coding.

DOWNLOAD             LIVE DEMO

CODE

<div class="container">
<div class="accordion" id="accordionid">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" 

                  data-parent="#accordionid" href="index.html#one">
        <h5>Title</h5>
      </a>
    </div>
    <div id="one" class="collapse">
      <div class="accordion-inner">
        <p>your text is here..</p>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" 

                  data-parent="#accordionid" href="index.html#two">
        <h5>Title</h5>
      </a>
    </div>
    <div id="two" class="collapse">
      <div class="accordion-inner">
        <p>your text is here..</p>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" 

                 data-parent="#accordionid" href="index.html#three">
        <h5>Title</h5>
      </a>
    </div>
    <div id="three" class="collapse">
      <div class="accordion-inner">
        <p>your text is here..</p>
      </div>
    </div>
  </div> 
</div>
</div>

class="accordion-heading" is for heading of the accordion, and the data-parent is the ID of the main Id of the accordion. the above i'm indicated with this color.

CSS & JQUERY

<style type="text/css">
*{ padding:0px; 
   margin:0px; }
.accordion-heading { background-color:#0CF; }
.accordion-heading:hover { background-color:#000; 
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out; }
.accordion-heading > a { color:#FFF; 
   text-decoration:none; 
   text-transform:uppercase; }
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

the above bootstrap and jquery min files are important. that is it. An accordion is ready. i hope this is very usefull to every one.

RELATED POSTS:

Dynamic Data Table using DataTable Jquery

Image slider with random animation effects using Jquery

Rotate image on hover using CSS3

Most popular posts in 2my4edge

Change text & background color while selecting text using CSS3

Marquee style in different manner with PHP and MySql

My Demos page design details with all my tutorials

Image Zoommer like E-commerce site using multizoom.js

Facebook style Scroll bar using Jquery

Change background image while page refresh using Javascript

Better and Flexible Tooltip using LiteTooltip.js

Drag and Drop Concept using Jquery