Bootstrap 3 Accordion With Step Wizard

Step Wizard
File Size: 1.11 KB
Views Total: 1360 views
Last Update:October 17, 2022
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>
          </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

Thanks for make jQuery plugin is developed by andymc1 For more Helpfull for users, please check the demo page or visit the official website.

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.

Related jQuery Plugins