How to create Accordion toggle using jQuery and Bootstrap
Bootstrap is one of the best framework for designing your websites and we have already created an article on contact form with bootstrap so this time we come with accordion toggle with bootstrap. Its very simple to configure and create with very nice animation with CSS and jQuery.
Used Bootstrap minified library and jQuery library With CSS and HTML below is the HTML of accordion and multiple options can be found on demo page.
<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>PHP</h5> </a> </div> <div id="one" class="collapse"> <div class="accordion-inner"> <p> <a href="https://www.phpgang.com/how-to-create-pretty-urls-from-strings-in-php_418.html" target="_self"> <li>How to create Pretty URLs from Strings in PHP</li></a> <br /> <a href="https://www.phpgang.com/how-to-post-tweet-on-twitter-with-php_414.html" target="_self"> <li>How to post tweet on Twitter with PHP</li></a> <br /> <a href="https://www.phpgang.com/how-to-upload-image-using-jquery-with-progress-in-php_394.html" target="_self"> <li>How to Upload Image using jQuery with progress in PHP</li></a> </p> </div> </div> </div> </div>
In above code class=”accordion-group” create a accordion main div class=”accordion-heading” class used to show heading of accordion class=”accordion-toggle” class used to show and hide on click event class=”accordion-inner” contain inner text of accordion.
Libraries to include:
<link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script src="js/bootstrap.min.js"></script>
CSS required to highlight accordion header color:
<style type="text/css"> .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>
You can download this tutorial from our website and also check its demo.
Tutorial Categories:
great tutorial, have a question, under “” I don’t want anything in it but want to load dynamically after the user clicks on the “class=”accordion-toggle”” to call a script which will then call a php script with paramters. I can share my code if you will please.