Accordions and Sliding Menus

Sliding Menu Instructions

The navigation menu is found in /includes/nav.html . Note that this tag in your unordered lists:

<ul title="navigation">

causes your menu to expand and collapse on those items that have another unordered list inside them. If you do not wish the menu to expand and contract, remove the title part of the ul tag so it looks like this:


Content Accordion Instructions

Accordions are sections that can be opened and closed by the viewer. They're very useful for FAQ pages or pages with lots of sections and text. To make these work you need a section header like this:

<h3 class="slider">Section 1</h3>

and then surrounding the "body" of the message that will be hidden when the accordion is closed a div like this:

<div class="drawer"><p>Body of Section 1 here</p></div>

Note that the accordion starts with all drawers closed and then clicking on a drawer opens that one and closes any that are open. Look at code for the example below:

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mi orci, vehicula in convallis nec, bibendum et leo. In hac habitasse platea dictumst. Morbi porttitor neque sit amet nisl mollis elementum aliquet nisi pharetra. Sed id turpis erat. Maecenas condimentum placerat dapibus. Mauris dignissim scelerisque tristique.

Section 2

Suspendisse ultrices mauris ante, vel auctor orci. Nullam nibh diam, lacinia at pretium vel, vulputate non lectus. Aliquam dictum nulla non metus vestibulum eu accumsan ipsum dapibus. Praesent augue orci, tempor in euismod in, posuere sit amet eros. Cras augue arcu, luctus ut imperdiet ac, varius eu erat.

Section 3

Curabitur commodo congue cursus. Morbi eu sapien erat. Mauris interdum leo vitae quam pretium ac facilisis justo tempus. In dictum, elit in hendrerit imperdiet, urna sapien dapibus justo, id luctus erat leo sit amet ligula.

Page Updated 07.16.2012