Accordion Wizard for Bootstrap 3

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

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:

<link href="css/bootstrap.min.css" rel="stylesheet">

and you'll include jQuery and Bootstrap javascript files at the end of your <body> section, for example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>

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.

There are two different ways to add the accordion wizard to your pages. The simplest approach is just to add the CSS and javascript files from the /release folder directly in your HTML without modifying them:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/acc-wizard.min.css" rel="stylesheet">

and

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/acc-wizard.min.js"></script>

The release styles for the accordion wizard are based on Bootstrap's default styles. If you've tweaked the Bootstrap styles (e.g. by changing the link color), you'll want to make corresponding tweaks to acc-wizard.min.css.

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 .col-md-3 and the accordion panels in a .col-md-9, but that's not a requirement.

The accordion panel can be exactly as documented in the Bootstrap example, but I think there's a problem with the Bootstrap implementation. Specifically, the Bootstrap example only adds the class .in to one of the accordion panels. That class marks the panel as visible by default. The problem with only having one panel visible by default is that users without javascript will never be able to see the other panels. Sure, that's a minority of users, but why make your pages unworkable even for a small minority. Instead, I suggest adding .in to all your .collapse elements and have javascript code select only one to make visible when it runs. The accordion wizard javascript will handle that for you if you choose to use that approach.

The sidebar task list is nothing but a standard HTML ordered list. The only required additions are adding the .acc-wizard-sidebar class to the <ol> element and .acc-wizard-todo to the individual list items. If you want to indicate that some steps are already complete, you can instead add the .acc-wizard-completed class to the corresponding <li> elements.

<ol class="acc-wizard-sidebar">
  <li class="acc-wizard-todo"><a href="#prerequisites">Install Bootstrap and jQuery</a></li>
  <li class="acc-wizard-todo"><a href="#addwizard">Add Accordion Wizard</a></li>
  <li class="acc-wizard-todo"><a href="#adjusthtml">Adjust Your HTML Markup</a></li>
  <li class="acc-wizard-todo"><a href="#viewpage">Test Your Page</a></li>
</ol>

Finally, you'll want to active the wizard in your javascript. That's nothing more than simply calling the plugin on an appropriate selection.

<script>
    $(window).load(function() {
        $(".acc-wizard").accwizard();
    });
</script>

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.