How to use it? All you need is:

The markup:

<a class="expander" href="#">click me</a>
<div class="content">
    content to hide.
</div>

You need:

• An element to use as the expander. Clicking this element will expand/colapse the content.
• An element with class content. This is the content to expand/colapse.

The javascript:

$('.expander').simpleexpand();

This will enable the plug-in on the given element(s). From this point forward, you can click the expander to expand/collapse the content.

You might also consider:

Adding a css class to hide all content elements while the document is loading to prevent blinking when the plug-in kicks in.

.content {display:none;}

Note that:

You can use any type of element you want as the expander or as the content.

If you always use the same class for all your expanders (such as expander) and the default content css class for your content, you will only need that one line of code to enable simple-expand on your page.

Demos

1. This is the simplest version

2. You can also add an image beside the expander

#container.expanded .expander {
    padding-left: 13px;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url(images/expanded.gif);
}

#container.collapsed .expander {
    padding-left: 13px;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url(images/collapsed.gif);
}

3. You can nest containers

<div class="expand-container">
    <a class="expander" href="#">click me</a>
    <div class="content">
        <p>Donec porta porttitor tellus sit amet cursus. Morbi nulla odio,
        blandit ac interdum at, consectetur eget purus. Ut cursus rhoncus. <p>
    
        <div class="expand-container">    
            <a class="expander" href="#">click me</a>
            <div class="content">
                <p>Donec porta porttitor tellus sit amet cursus. Morbi nulla odio,
                blandit ac interdum at, consectetur eget purus. Ut cursus rhoncus. <p> 

                <div class="expand-container">    
                    <a class="expander" href="#">click me</a>
                    <div class="content">
                        <p>Donec porta porttitor tellus sit amet cursus. Morbi nulla odio,
                        blandit ac interdum at, consectetur eget purus. Ut cursus rhoncus. <p> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

$('.expand-container').simpleexpand();

4. The expander can be deep inside other elements and still affect a content outside the expander's scope

5. The expander can affect multiple targets.

<a class="expander" data-expander-target=".demo-code .content" 
                    data-expander-target-search="absolute" href="#">
click me toggle all code snippets in this page
</a>

$('.expand-container').simpleexpand();

Documentation

The Magic

By default, the plug-in tries to automatically find the target(s) for each expander. You don't need to point it to its targets. The plug-in will match the "closest" target. Here is how it works.

1. Inspect the expander's siblings and search for a sibling with the content css class.
2. If none is found go up one level in the expander's parents. Inspect the parent's children and search for a child with the content css class.
3. If none is found go up one level again and retry.

If the default does not work for you, change the defaut for everything (see next section). If one specific instance does not work, use the attributes on that expander for fine grained control (see below).

The Options

You can change defaults using the usual syntax:

$('.expander').simpleexpand({'option1':'value1', 'option2':'value2'});

Options documentation from simple-expand.js:

// hideMode
// -----------
// Specifies method to hide the content element.
//
// Default: fadeToggle
//
// Values:
// - fadeToggle: Use jquery.fadeToggle()
// - basic: Use jquery.toggle()
// - css: relies on user provided css to show/hide. you can defines
//   classes for "collapsed" and "expanded" classes.
//
// If un an unknown value is specified, the plug-in reverts to "css".
'hideMode': 'fadeToggle',

// searchMode
// -----------
// Specifies the defaut value for  data-expander-target-search
// when none is specified on the expander element.
//
// Default: parent
//
// Values:
// - parent: go up the expander's parents hierarchy searching 
//           each parent's childens looking for a target
//
// - absolute : finds a target globally in the document (useful when 
//              matching an id)
//
// - relative : finds a target nested inside the expander
//
// If un an unknown value is specified, no targets will be found.
'defaultSearchMode': 'parent',

// defaultTarget
// -----------
// Specifies the defaut value for data-expander-target when
// none is specified on the expander element. This is a regular 
// jQuery expander. You can use anything that jQuery likes.
//
// Default: .content
'defaultTarget': '.content',

// throwOnMissingTarget
// -----------
// Specifies whether the plug-in throws an exception if it
// cannot find a target for the expander 
//
// Default: true
'throwOnMissingTarget': true,

// keepStateInCookie
// -----------
// Specifies whether the plug-in keeps the expended/collapsed state 
// in a cookie for the next time.
//
// Default: false
//
// Notes:
// - This only works for expanders with an Id attribute.
// - Make sure you load the jQuery cookie plug-in (https://github.com/carhartl/jquery-cookie/)
//   before simple-expand is loaded.
//     
'keepStateInCookie': false,
'cookieName': 'simple-expand'

Fine grained control per expander

You can use data-expander-target and data-expander-target-search attributs on individual expander elements to override the defaults for a specific expander. They do the same as the searchMode and defaultTarget options but for a single expander.

// target all special divs (data-expander-target="div.special")
// on the page (data-expander-target-search="absolute").
<a class="expander" 
    data-expander-target="div.special" 
    data-expander-target-search="absolute" 
    href="#">click me toggle all code snippets in this page</a>

The unit tests

If the above documentation is not enough, read the jasmine unit tests to get a better understanding of what you can do and wht the edge cases are.