This plugin enables an accordion that can use cookies to persist between pages or visits. This plugin was made with the jQuery 1.10.1.

If you find any errors or have suggested changes, please post an issue on the github project: http://github.com/juven14/Accordion

You need to add two parts, a header and a container. The header div is for the label and the open/close text/images. The container will hold any html/text you want to slide up/down.

    <div class="accordion" id="section1">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div&gt
    <div class="accordion" id="section2">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div&gt
    <div class="accordion" id="section3">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div&gt

Add in the javascript:

    <script type="text/javascript" src="javascript/jquery.cookie.js"></script> <!--required only if using cookies--&gt
    <script type="text/javascript" src="javascript/jquery.accordion.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.accordion').accordion({defaultOpen: 'some_id'}); //some_id section1 in demo
        });
    </script>

The plugin default options are as follows:

{
    cssClose: 'accordion-close', //class you want to assign to a closed accordion header
    cssOpen: 'accordion-open', //class you want to assign an opened accordion header
    cookieName: 'accordion', //name of the cookie you want to set for this accordion
    cookieOptions: { //cookie options, see cookie plugin for details
        path: '/',
        expires: 7,
        domain: '',
        secure: ''
    },
    defaultOpen: '', //id that you want opened by default
    speed: 'slow', //speed of the slide effect
    bind: 'click', //event to bind to, supports click, dblclick, mouseover and mouseenter
    animateOpen: function (elem, opts) { //replace the standard slideDown with custom function
        elem.next().stop(true, true).slideDown(opts.speed);
    },
    animateClose: function (elem, opts) { //replace the standard slideUp with custom function
        elem.next().stop(true, true).slideUp(opts.speed);
    },
    loadOpen: function (elem, opts) { //replace the default open state with custom function
        elem.next().show();
    },
    loadClose: function (elem, opts) { //replace the default close state with custom function
        elem.next().hide();
    }
 }

• cssClose - class assigned when closed
• cssOpen - class assigned when opened
• cookieName - cookie name for persisting the opened panel
• cookieOptions - see jquery.cookie plugin for more info
• defaultOpen - id that you want opened by default
• speed - animation speed
• bind - event that triggers the collapsible, only 4 are supported: click, dblclick, mouseenter, and mouseover
• animateOpen - custom callback to animate opening
• animateClose - custom callback to animate closing
• loadOpen - custom callback to animate default opening
• loadClose - custom callback to animate default closing

In the above header example HTML you will see an empty span, this is useful if you wish to assign an open/close image.

This plugin will append a user defined (or default, see options above) class to header of the accordion. You can use this to swap out the images or style the different states of your accordion.

    .accordion div.collapse-open {}
    .accordion div.collapse-close {}
    .accordion div.collapse-open span {}
    .accordion div.collapse-close span {}

You can additionally add in custom animation functions such as below:

    $(document).ready(function() {

        //custom animation for open/close
        $.fn.slideFadeToggle = function(speed, easing, callback) {
            return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
        };

        $('.accordion').accordion({
            defaultOpen: 'section1',
            cookieName: 'nav',
            speed: 'slow',
            animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
                elem.next().stop(true, true).slideFadeToggle(opts.speed);
            },
            animateClose: function (elem, opts) { //replace the standard slideDown with custom function
                elem.next().stop(true, true).slideFadeToggle(opts.speed);
            }
        });
    });

    @CHARSET "UTF-8";
    #left_nav {
        width:250px;
    }
    #body {
        width:90%;
        float:left;
        margin:10px;
    }
    .accordion {
        margin: 0;
        padding:10px;
        height:20px;
        border-top:#f0f0f0 1px solid;
        background: #cccccc;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration:none;
        text-transform:uppercase;
        color: #000;
        font-size:1em;
    }
    .accordion-open {
        background:#000;
        color: #fff;
    }
    .accordion-open span {
        display:block;
        float:right;
        padding:10px;
    }
    .accordion-open span {
        background:url(../images/minus.png) center center no-repeat;
    }
    .accordion-close span {
        display:block;
        float:right;
        background:url(../images/plus.png) center center no-repeat;
        padding:10px;
    }
    div.container {
        padding:0;
        margin:0;
    }
    div.content {
        background:#f0f0f0;
        margin: 0;
        padding:10px;
        font-size:.9em;
        line-height:1.5em;
        font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }
    div.content ul, div.content p {
        padding:0;
        margin:0;
        padding:3px;
    }
    div.content ul li {
        list-style-position:inside;
        line-height:25px;
    }
    div.content ul li a {
        color:#555555;
    }
    code {
        overflow:auto;
    }