Accordion Form Demo

This is using Bootstrap 4.

HTML data attributes:

  • data-acc-step - defines the step container. In this case, it's added to bootstrap's .list-group-item element
  • data-acc-title - defines the title of the step, only required if you want the plugin to add step numbers for you.
  • data-acc-content - defines the content of the step with the form fields.

Optionally, if you set autoButtons: false, you must also use these attributes to control navigation:

  • data-acc-btn-next - next button
  • data-acc-btn-prev - previous button
Change mode:      
Name & Email
Contact
Payment

Demo markup