Bootstrap 3 Accordion With Step Wizard

Step Wizard
Demo    Download
Bootstrap 3 Accordion With Step Wizard
File Size: 1.11 KB
Views Total: 221 views
Last Update:February 20, 2021
Publish Date: January 21, 2021
Official Website: Go to website
License: MIT
Plugin Author: andymc1

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>
          </h4>
        </div>
        <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>
          </div>
        </div>
      </div>
</div>

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('show.bs.collapse', function () {
        $("#panel-shipping-heading").attr("href", "#collapse-delivery2").css('color', 'black')
      })
      
      //after payment is shown, add href
      $('#collapse-payment').on('show.bs.collapse', function () {
        $("#panel-payment-heading").attr("href", "#collapse-payment").css('color', 'black')
      })
      

Done


Mady

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.