Bootstrap 3 Accordion With Step Wizard

Step Wizard
Bootstrap 3 Accordion With Step Wizard
File Size: 1.11 KB
Views Total: 2341 views
Last Update:March 11, 2023
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. Bootstrap 3 Accordion With Step Wizard is a plugin that combines the functionality of a step wizard with the collapsible accordion feature in Bootstrap 3. This plugin allows you to create a multi-step form or information display that is easy to navigate and visually appealing.

It uses jQuery to add animations and transitions to the accordion panels and includes validation for each step. The plugin is fully customizable, allowing you to change the colors, icons, and labels to match your site’s design. It’s a great way to improve the user experience on your site or application.

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.