Accordion Style Form Wizard Plugin - jQuery Accordion Wizard

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 &amp; 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.