Accordion toggle using Jquery with Bootstrap | 2my4edge

26 December 2013

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.
accordion toggle with jquery
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:


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

2 comments:

  1. Instead of clicking, can you modify it to work with mouse over event?

    ReplyDelete
  2. Nice article and you are sharing a wonderful information to the readers. I would like to thank you for sharing this good article.

    ReplyDelete

^