jQuery ExpandMe plugin

A jQuery JavaScript plugin for expanding images vertically in articles.


This is a very simple plugin that can be useful when putting large images (i.e. website screenshots) inside articles.

An image can occupy full width of an article while only the top part of it is visible. An expand/collapse bar at the bottom of the image view expands the image container vertically making the image fully visible:


Assume we have an article with embedded image inside .expandme wrapper and defined stylesheet similar to the one in jquery.expandme\css\expandme.css.

    <div class="expandme" style="height: 440px;">
        <img src="image.jpg" />
        <a href="#" class="expand-toggle"></a>

Then the corresponding JS bit is:


The plugin can also take callbacks so for example you may want to scroll to article top when collapsing an image:

    onBeforeCollapse: function(settings){
        var $elem = $(this); // Expandable
        // requires scrollTo plugin
        $.scrollTo($elem.parents('article'), settings.speed);


All available plugin settings:

var settings = $.extend({
    height: null,                    // Initial height of image (usually specified in css)
    speed: 500,                      // Expansion/collapsing speed
    expandEasing: 'swing',           // Expand easing for jQuery animate
    collapseEasing: 'swing',         // Collapsing easing for jQuery animate
    activeClass: 'active',           // Class added to expanded element
    expandToggleClass: 'expand-toggle', // Class for anchor element that triggers expand action
    onBeforeExpand: null,            // Function to call before expanding
    onAfterExpand: null,             // Function to call after expanding
    onBeforeCollapse: null,          // Function to call before collapsing
    onAfterCollapse: null,           // Function to call after collapsing
    contentSelector: 'img',          // jQuery selector string of full-height content element
    namespace: 'expandme'            // Plugin data namespace
}, options);


See the css and img folders for stylesheet and image resources required by the plugin.


See index.html file in the source code demo folder or http://en.ig.ma/projects for examples.


The source code is on GitHub and BitBucket. Grab it from there or download latest zipped code.

Article "jQuery ExpandMe plugin" was published on Dec. 2, 2011 and tagged under jquery and labs. You can it if you like or leave a comment below.

Next article: Installing VirtualBox Guest Additions on Ubuntu Server

Previous article: Chrome Extension for AI Class Forum