About the the Plug-in

You just made an accordion for a client using jQuery UI. Her eyes light up when you show it to her. She tries it out and suddenly the smile changes to a look of confusion.

"Wait, I can only open one at a time?

Can you fix that? Also, I want these ones to start closed and these ones to start opened."
Have you ever been there?

The problem is accordions don't work that way. Accordions only let you open one item at a time. That's why I wrote this plugin.

Easy Expand jQuery plugin gives you the look and feel of accordions with the ability to open or close your elements any way you like. You can preset each one individually. You can also use load content dynamically with Ajax.

It's light-weight and easy to use. The plug-in auto-generates the buttons and no image files are required! All you need is the basic jQuery library. The CSS is easy to customize and you can use your own class names if you want.

Sound good? Let's get started!

Plug-in Options

Options:

startClosedDetermines whether or not the Easy Expand element defaults to a closed state at page load.

- boolean (default = true) outerContainerDefines the CSS class selector of the Easy Expand outer containers

- string (CSS class name - default: 'outer-container') buttonContainerDefines the CSS class selector of the Easy Expand button containers

- string (CSS class name - default: 'button-container') buttonClassSets the CSS class of the Easy Expand arrow toggle buttons.

- string (CSS class name - default: 'easyexpand') durationSets the duration of the slideToggle() effect in milliseconds.

- INT (default: 200) easingSets the easing option for the slideToggle()

- string (easing option name - default: 'swing')
NOTE: 'swing' and 'linear' are the only easing methods available by default. Other easing options require the easing plugin. Using Multiple Options$('.myclass').easyexpand({'option' : 'value', 'option' : 'value'}); Using callbacks To use a callback function, simply pass the name of the function:

$('.content-container').easyexpand(myCallback);

If you're passing optional settings as well, pass the callback as the second argument.

$('.content-container').easyexpand({'duration' : 250}, myCallback);

Ajax Easy Expand Elements
jQuery Demo code

In this demo, four of the Easy Expands elements are preset to closed and three others are preset to opened. One Easy Expand element uses a callback to load content dynamically via Ajax.

As you can see below, the key to having multiple Easy Expand elements with differnt settings is to use separate instances of the function, targeting different classes.

$(document).ready(function() {

$('.closed').easyexpand(); $('.open').easyexpand({'startClosed' : false }); $('.callback').easyexpander(myCallback);

function myCallback() { $('.ajax').load('ajax-content.html'); }
});

Download Easy Expand jQuery Plugin

Download the Easy Expand jQuery plug-in HERE

Coding Basic Usage

The javascript:

$(document).ready(function() {
  $('.content-container').easyexpand();
});

The HTML:

<div class="outer-container">

  <div class="button-container">
    <h2>The header goes here<h2>
    <!-- the button goes here --!>
  </div>

  <div class="content-container">
    <p>The content goes here</p>
  </div>

</div>  <!-- end of .outer-container --!>

Please note:

  • You must use the basic HTML sctructure shown above
  • The highlighted class names are the default class names used by the plug-in.
  • You may use your own class names by passing optional parameters to the plug-in.

Understanding Basic Usage

In this example, we're using the default class names. The div called '.content-container' is the element that will open and close when we click the button. This is where the content goes. This is the specific selector you must target when you call the function. You can use a different class name for this container if you want. However, if you do you must pass it to the function as an optional setting

The '.content-container' needs a sibling div to act as the button container. The button will be automatically generated by easyexpand. The default class for this container is 'button-container.' Again, you can specify your own class name by passing an optional parameter. You can also put a header in this container.

Finally, '.content-container' and '.button-container' both need to be wrapped in a parent div, which is used for DOM traversal. Its default class name is 'outer-container'. As with the other containers, you can specify your own class name.

Please note:

For this demo I've chosen to use CSS 3 rounded corners and CSS 3 gradients as part of the design. Those styles do not work in all browsers. I'm using PIE to enhance browser support for these styles.