Accordion Menu

Demo

  • Panel 1
    • Item 1
    • Item 2
    • Item 3
    • Item 4
  • Panel 2
    • Item 1
    • Item 2
    • Item 3
    • Item 4
  • Panel 3
    • Item 1
    • Item 2
    • Item 3
    • Item 4

Overview

The accordion menu is a simple multi-level list that expands or collapses when a top-level menu item is clicked.

Usage

To create an accordion menu, simply add the class accordion to a ul element. Each list item must contain an a element as a trigger for the panel and then additional elements (usually another ul) to make up the panel itself.

By default, all panels start closed. If you wish to have one or more start open, simply add the class active to the top-level li element.

Code Example

The following code is based on the demo displayed to the left.

<ul class="accordion">
	<li class="active"><a href="#">Panel 1</a>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</li>
	<li><a href="#">Panel 2</a>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</li>
	<li><a href="#">Panel 3</a>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</li>										
</ul>
Want to continue the tour?

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.