Example 1: Default settings

First, you need to import the jQuery library, the FancyMe Accordion plugin, and the accordion CSS

<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>
        

The HTML needed to structure our simple accordion is nothing more than lists with corresponding H2 headers, and a global H1 header, wrapped into a DIV like shown in the next block of code. A class ACTIVE has been added to both the H2 and the list element LI that mark the selected or active item of the menu

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

Lastly, inside a SCRIPT tag in the HEAD of your page, you reference the wrapping DIV and bind it to the accordion plugin

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

This brings the default view of the accordion which includes:

Example 2: Changing themes and speed

In this example, the HTML is exactly the same, and the imports have been made, but some parameters have been added to the JQuery function

<script>
$(function() {
    $('.accordion').fancymeaccordion({theme:"pink",speed:"slow"});
});
</script>
        

The first new parameter we added is THEME. Fancyme plugins have the following themes available (which are the possible values for the parameter):

The CSS file is easily structured for the developer to change colors used in these themes.

The next parameter is SPEED, and its default value is "fast". By adding speed: "slow", we get the effect shown to the left.

Example 3: Limiting active elements

The last parameter to explain is the ACTIVES parameter, which has a default value of actives: "all". Look at the following code (JQuery function for adding the plugin)

<script>
$(function() {
    $('.accordion').fancymeaccordion({theme:"green",actives:"one"});
});
</script>
        

This results in the menu shown to the left, and if you click through its main options, you will see that as soon as a submenu opens, the one that was previously open immediately collapses. This is achieved through the actives: "one" parameter specification.