swell-js

Swell JS is a JQuery plugin that easily reveals hidden content wells

Demo

Demo

Documentation

You need to include the following css.

    <link rel="stylesheet" href="swell.css">

You need to include the following after Jquery has been included.

   	<script src="swell.js"></script>

Below is the basic syntax for a Swell. The lid will cover the content until the Swell is hovered over to reveal the content.

    <div class="sw-box sw-text">
        <div class="sw-lid">
            <!-- Lid -->
        </div>
        <div class="sw-well">
            <!-- Content -->
        </div>
    </div>

Finally, bind the plugin to a selector

    $(function() {
        $('.sw-box').swell();
    });

Below is a list of the options and their default values

    $('.sw-box').swell({
        offset: "0", // positive or negative number to offset the lid
        direction: "top", // values: [top, left, right, bottom]
        duration: 200, // animation duration
        easing: "linear", // easing property
        animation: "slide", // values: [slide, flip, fade]
        shownCallback: null, // function name
        hiddenCallback: null // function name
    });

A quick note about the options

Offset and callbacks are not used for flip animations Direction is not used for the fade animation

Compatibility

Tested in the following browsers

• Chrome
• Firefox
• Opera Next
• Opera ***
• IE 7, 8, 9 ***

*** The flip animation is not compatible due to the CSS3 Transformations