HeroStrap ADMIN
Welcome back, Jack L.
Chat 2 Inbox 6 Setting
Log Out
  • Home/
  • Accordion Wizard
Accordion Wizard | |

Follow the steps below to add an accordion wizard to your web page.

  1. Prerequisites
  2. Add Wizard
  3. Adjust HTML
  4. Release
Install Bootstrap and jQuery
The accordion wizard depends on two other open source packages:
  • The Bootstrap framework, available here.
  • The jQuery javascript library, available here.
Note that Bootstrap itself depends on jQuery for its interactive components, so if you're using Bootstrap you probably already have jQuery as well.

You'll include the CSS styles for Bootstrap in the <head> of your HTML file, for example:

Add Accordion Wizard

If you haven't already found it, the source code for the accordion wizard is available on github here. There are two main folders, /src and /release.

Alternatively, if you're building custom CSS and javascript, then you might want to start with the files in the /src folder and adapt them to your source code. The /src folder contains a LESS file and uncompressed (and commented) javascript. Note that the acc-wizard.less file depends on variables defined in Bootstrap's variables.less file.
Adjust Your HTML Markup

Now you can modify your HTML markup to activate the accordion wizard. There are two parts to the markup—the collapsible accordion itself and the task list. I prefer putting both in the same .row with the task list taking up a .span3 and the accordion panels in a .span9, but that's not a requirement.

The default options are probably fine for most uses, but there are many customizations you can use when you activate the wizard. Check out the documentation on github for the details.
Test Your Page

Naturally, the last thing you'll want to do is test your page with the accordion wizard. Once you've confirmed that it's working as expected, release it on the world. Your users will definitely appreciate the feedback and guidance it gives to multi-step and complex tasks on your web site.