Bootstrap 3 Accordion With Step Wizard

Step Wizard
File Size: 1.11 KB
Views Total: 1001 views
Last Update:October 2, 2021
Publish Date: January 21, 2021
Official Website: Go to website
License: MIT
Plugin Author: andymc1
Demo    Download

A bootstrap 3 step wizard used with accordions.

How to used :

Add with jQuery library and bootstrap library.

Here, We’re adding jQuery Library files Of Javascript and CSS files into the existing code.

<script src="/cdn/jquery-1.12.4.min.js"></script>
<link href="/cdn/bs3/bootstrap.min.css" />
<script src="/cdn/bs3/bootstrap.min.js "></script>

Add Html Code for bootstrap Accordion With Step Wizard

<div class="panel-group" id="checkout-accordion">
      <div class="panel panel-default checkout-panel" id="panel-billing">
        <div class="panel-heading checkout-heading" id="panel-billing-heading" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-billing">
          <h4 class="panel-title checkout-acc-title">
            <a>How much money do you need?</a>
        <div id="collapse-billing" class="panel-collapse details collapse in">
          <div class="panel-body checkout-inside">
                <input type="text" name="">
                        <button id="toggle-delivery" type="button" class="btn-checkout" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery2">Next</button>

Add Step wizard Script

//Remove href from shipping and payment from start
      $("#panel-shipping-heading").removeAttr("href").css('color', 'gray')
      $("#panel-payment-heading").removeAttr("href").css('color', 'gray')
     //after delivery is shown, add href
      $('#collapse-delivery2').on('', function () {
        $("#panel-shipping-heading").attr("href", "#collapse-delivery2").css('color', 'black')
      //after payment is shown, add href
      $('#collapse-payment').on('', function () {
        $("#panel-payment-heading").attr("href", "#collapse-payment").css('color', 'black')



Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.