A responsive, fully-loaded jQuery accordion plugin

features

Fully responsive with lots of features yet lightweight (only 4k minified)
Supports jQuery easing for panel transitions
Built-in callback functions on load, before, and after panel transitions
Use your own custom CSS to style
Gracefully degrades if JavaScript is disabled
Can hold any HTML/PHP/JavaScript, etc.
Allows multiple instances on a page
Works in IE8+ and all ~~real~~ modern browsers (Chrome, Safari, Firefox, Opera)

easy setup

Include the proper files in your page:



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<script type="text/javascript" src="jquery.easing.1.3.min.js"></script>


<script type="text/javascript" src="jquery.accordable.min.js"></script>

Next, set up your HTML.
accordable.js assumes the following HTML structure:



    
        Panel Heading One
        Body copy goes here...
    
    
        Panel Heading Two
        Body copy goes here...

Then just call the function to initialize the plugin:


(function(){

    $('#element-id').accordable();

})();

That's it! accordable.js should now be up and working.

default settings & options

Accordable has a number of optional settings:


(function(){

    $('#element').accordable({

        openPanel: [],
        // ARRAY - choose which panels should start opened
        // accepts array of panels, i.e., [1, 3, 4] etc.

        openAll: false,
        // BOOLEAN - open all panels on page load

        closeAll: true,
        // BOOLEAN - when user clicks, only allow one panel open at a time

        speed: 300,
        // INTEGER - speed of the transition in milliseconds

        easing: 'swing',
        // STRING - easing style (be sure to include jquery easing)

        addClasses: true,
        // BOOLEAN - adds class names to accordion elements for CSS styling

        onLoad: function() {},
        // FUNCTION - callback on accordion/page load

        beforeToggle: function() {},
        // FUNCTION - callback before accordion fires

        afterToggle: function() {}
        // FUNCTION - callback after accordion fires
    });

})();

examples

open first panel on page load


(function(){

    $('#element').accordable({

        openPanel: [1]
        
    });

})();

Panel Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit mauris, euismod at leo et, tempor aliquam diam. Suspendisse erat arcu, iaculis et nisl sed, cursus pharetra justo. Praesent sodales gravida justo sed accumsan. Cras ornare posuere eleifend.
Panel Heading Two

Vestibulum molestie scelerisque orci. Mauris in mattis nunc. Morbi lobortis ante ac blandit congue. Donec non neque et turpis feugiat pretium ut sit amet orci. Mauris mi leo, laoreet et leo et, blandit pellentesque lectus. Mauris ultrices erat ac risus vestibulum interdum. Suspendisse dui metus, imperdiet eu justo nec.
Panel Heading Three

Pellentesque placerat mollis justo ut volutpat. Sed lobortis auctor consequat.

open first and third panels on page load and toggle headings


(function(){

    $('#element').accordable({

        openPanel: [1, 3],
        closeAll: false
        
    });

})();

Panel Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit mauris, euismod at leo et, tempor aliquam diam. Suspendisse erat arcu, iaculis et nisl sed, cursus pharetra justo. Praesent sodales gravida justo sed accumsan. Cras ornare posuere eleifend.
Panel Heading Two

Vestibulum molestie scelerisque orci. Mauris in mattis nunc. Morbi lobortis ante ac blandit congue. Donec non neque et turpis feugiat pretium ut sit amet orci. Mauris mi leo, laoreet et leo et, blandit pellentesque lectus. Mauris ultrices erat ac risus vestibulum interdum. Suspendisse dui metus, imperdiet eu justo nec.
Panel Heading Three

Pellentesque placerat mollis justo ut volutpat. Sed lobortis auctor consequat.

use a jQuery easing function


(function(){

    $('#element').accordable({

        easing: 'easeInOutQuint',
        speed: 600
        
    });

})();

Panel Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit mauris, euismod at leo et, tempor aliquam diam. Suspendisse erat arcu, iaculis et nisl sed, cursus pharetra justo. Praesent sodales gravida justo sed accumsan. Cras ornare posuere eleifend.
Panel Heading Two

Vestibulum molestie scelerisque orci. Mauris in mattis nunc. Morbi lobortis ante ac blandit congue. Donec non neque et turpis feugiat pretium ut sit amet orci. Mauris mi leo, laoreet et leo et, blandit pellentesque lectus. Mauris ultrices erat ac risus vestibulum interdum. Suspendisse dui metus, imperdiet eu justo nec.
Panel Heading Three

Pellentesque placerat mollis justo ut volutpat. Sed lobortis auctor consequat.

callback function after transition


(function(){

    $('#element').accordable({

        afterToggle: function() {
        	
        	alert('Transition complete!');
        	
        }
        
    });

})();

Panel Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit mauris, euismod at leo et, tempor aliquam diam. Suspendisse erat arcu, iaculis et nisl sed, cursus pharetra justo. Praesent sodales gravida justo sed accumsan. Cras ornare posuere eleifend.
Panel Heading Two

Vestibulum molestie scelerisque orci. Mauris in mattis nunc. Morbi lobortis ante ac blandit congue. Donec non neque et turpis feugiat pretium ut sit amet orci. Mauris mi leo, laoreet et leo et, blandit pellentesque lectus. Mauris ultrices erat ac risus vestibulum interdum. Suspendisse dui metus, imperdiet eu justo nec.
Panel Heading Three

Pellentesque placerat mollis justo ut volutpat. Sed lobortis auctor consequat.

support

For questions or bug reports please create an issue on Github.