Accordion Style Form Wizard Plugin - jQuery Accordion Wizard
File Size: | 69.8 KB |
---|---|
Views Total: | 5496 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight (~2.5 kb) jQuery based form wizard plugin which enables the user to collapse & expand steps by clicking on next/back buttons just like an accordion.
Not only form fields, the plugin also can be used to construct wizard-like multi-step processes.
How to use it:
1. To get started, place the JavaScript jquery.accordion-wizard.min.js
after jQuery but before we close the body
tag.
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"> </script> <script src="dist/jquery.accordion-wizard.min.js"></script>
2. Create the wizard steps using the data-acc-title
and data-acc-content
attributes.
<h5 data-acc-title>Name & Email</h5> <div data-acc-content> <input type="text" name="name"> <input type="text" name="email"> </div>
3. Group the wizard steps using the data-acc-step
attribute.
<form id="form"> <div data-acc-step> <h5 data-acc-title>Step 1</h5> <div data-acc-content> <input type="text" name="name"> <input type="text" name="email"> </div> </div> <div data-acc-step> <h5 data-acc-title>Step 2</h5> <div data-acc-content> <input type="text" name="name"> <input type="text" name="email"> </div> </div> <div data-acc-step> <h5 data-acc-title>Step 3</h5> <div data-acc-content> <input type="text" name="name"> <input type="text" name="email"> </div> </div> </form>
4. Attach the plugin to the HTML form.
$(function(){ $("#form").accWizard(); });
5. The necessary CSS rules to hide the content on init.
div[data-acc-content] { display: none; }
6. Possible options to customize the form wizard.
$("#form").accWizard({ // start step start: 1, // or 'edit' mode: "wizard", // auto scroll the page to the current step enableScrolling: true, // padding in pixels scrollPadding: 5, // auto add next/back buttons autoButtons: true, // CSS classes for next/back buttons autoButtonsNextClass: null, autoButtonsPrevClass: null, // auto show submit button autoButtonsShowSubmit: true, // submit text autoButtonsSubmitText: 'Submit', // save text autoButtonsEditSubmitText: 'Save', // show step number stepNumbers: true, // CSS class for step number stepNumberClass: '' });
7. Trigger a function before you go to the next step.
$("#form").accWizard({ beforeNextStep: function( currentStep ) { return true; } });
8. Trigger a function when you submit the form.
$("#form").accWizard({ onSubmit: function( element ) { return true; } });
This awesome jQuery plugin is developed by wrabit. For more Advanced Usages, please check the demo page or visit the official website.