JQuery Plugin Project – FancyMe Accordion

I’ve been working on this project for a while and I’m happy to finally be able to publish it. It’s a series of JQuery plugins with the peculiarity that they have several color themes than can be changed through a parameter in the function call, without having to touch the CSS.

The first one in the list is the Accordion Menu.

accordionplugin01

This is accomplished through a simple HTML structure involving a global H1, main titles with H2, and lists of submenus with UL. The HTML looks like the following:

<div class="accordion">
<h1>Menu</h1>
<h2>Title</h2>
<ul>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
</ul>
<h2 class="active">Title</h2>
<ul>
	<li><a>Something</a></li>
	<li><a class="active">Something</a></li>
	<li><a>Something</a></li>
</ul>
<h2>Title</h2>
<ul>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
</ul>
<h2>Title</h2>
<ul>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
</ul>
</div>

Notice that I added ACTIVE classes to both the H2 and the LI elements that represent the currently active choice. The CSS can go untouched, but must be imported to the page, along with the plugin file.

<link rel="stylesheet" type="text/css" href="fancymeaccordion.css"/>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="fancymeaccordion.jQuery.js"></script>

After that, you can just reference the plugin through this simple line, which displays the result shown at the very top of this post (with all the default values)

<script>
 $(function() {
   $('.accordion').fancymeaccordion();
 });
</script>