February 16, 2024 5:02 am

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.

accordion-toggle-using-jquery-and-bootstrap

[wpdm_file id=55]DEMO

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

One response to “How to create Accordion toggle using jQuery and Bootstrap”

  1. Sap King says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *