Menu using Ojay.Accordion with extra effects

This example shows how to create an accordion menu using Ojay.Accordion, and how to customize it using its event API and using the CSS classes it generates.

We begin with a simple list of <div class="section"> elements, each containing an <h3> and a <p>. The accordion is easily created using a single call, and some event listeners are added to add an opacity fade to the expand/collpase animations. We also use Ojay.History to allow navigation between the accordion’s sections to be recorded in the browser history, allowing sections to be bookmarked and traversed using the back/forward buttons.

JavaScript source code

Stylesheet