Accordion Menu

The Action:

A navigation list. Clicking on a main link opens a sub-level of navigation, while hiding any other sections that are currently open.


Why Was This Created?

An initial attempt was made using bootstrap, which works, but results in some pretty messy code. This version just uses simple unordered lists, so everything is kept as clean and semantic as possible. 



1. Include jQuery in your document.

2. Include the "Nav Accordion" javascript code shown below.

3. Create the list structure as shown below.


Other Notes:

1. When a section is currently open, the link tag will be given a class of "accordionnav-current-section" for easy styling.

2. When first opening the page, if you want a section open by default, set a javascript variable named "accordionNavSection" equal to the id of the subsection you would like to have open.




Javascript Code:


HTML Code:

Related Posts

Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

A Nicer Select Dropdown

Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed...
Read Post

Removing the Horizontal Margins on a Google Chart Graph

I seem to be able to successfully modify quite a bit with google charts, but I couldn't find a good way to remove the horizontal padding to the left and right of a google graph. From what I can find, there really isn't a good way to do it...
Read Post

PHP JSON Returned As Object Instead of Array

I was returning, what I thought was an array from PHP, but it kept returning it as a json object...
Read Post