Xpander Plugin

By Jeffrey McClure?

Description

This plugin, when attached to a standard link will display that link inline as a toggling div based on the src attribute of the original link. This plugin allows the content to be reachable for users without Javascript installed or running. There are several customizable options available as well, including:

Options

* Stylesheet
* Height of Area
* Width of Area
* FX Toggle & Speed
* Initial State of Toggle
* Text/Image links for Show/Hide Functionality
* Overflow Settings
* Element Declaration (NEW)

Usage

Basic Example:

$('a.inline').Xpander();

Advanced Example:

     $('a#inline2').Xpander({
          height: '120px',
          width: '90%',
          show: 'Click to Show Details',
          hide: 'Click to Hide Details',
	  style: 'myStyle',
	  display: 'block',
          element: 'iframe',
          fx: 800
     });

Image Example:

     $('a#inline_image').Xpander({
          height: '120px',
          width: '90%',
          show: '<img src="show.gif" alt="Show"/>',
          hide: '<img src="hide.gif" alt="Hide"/>',
	  style: 'myStyle',
          fx: 'slow'
     });

Source

/*
        Filename: Xpander.js
        Version:  0.3.1
        Date:     10/02/06
        Author:   jmcclure @ activespotlight . com
        Updates:
                10/09/06 - Added Support for both div and iframe content holders
                10/09/06 - Switched plugin to object notation (at least closer to)
*/
jQuery.Xpander = {
        build : function(o) {
        // Define Defaults
        var s = {
                height:         'auto',         // valid css height declaration
                width:          '100%',         // valid css width declaration
                fx:             false,          // false, slow, fast, etc...
                style:          false,          // class name
                overflow:       'hidden',       // auto, scroll, hidden, visable
                show:           'Show',         // Link Content (Image, Text, etc)
                hide:           'Hide',         // Link Content (image, Text, etc)
                display:        'none',         // block, none (initial state)
                element:        'div'           // Element Block Type (div/iframe)
        };
        // Update Defaults with Settings
        if(o) $.extend(s, o);
        // Loop Through Each Matched Item
        return this.each(function(){
                // Make Sure Link is Valid (VERY basic skip of # and empty attrs)
                if($(this).attr('href').length < 2) return false;
                // Control value
                if(s.element != 'iframe') s.element = 'div';
                // Create Content Block
                var ptr = document.createElement(s.element);
                ptr.style.height = s.height;
                ptr.style.width = s.width;
                ptr.style.display = s.display
                $(this).after(ptr);
                // Update Link based on Starting State
                if(s.display=='none')
                        $(this).html(s.show)
                else
                        $(this).html(s.hide);
                // Load Content into Payload
                if(s.element == 'iframe')
                        $(this).next(s.element).attr('src',$(this).attr('href'));
                else
                        $(this).next(s.element).load($(this).attr('href'));
                // Assign Class
                if(s.style)
                        $(this).next(s.element).addClass(s.style);
                // Define Toggle Action
                $(this).click(function() {
                        if($(this).next(s.element).css('display') == 'none')
                        {
                                if(s.fx)
                                        { $(this).next(s.element).animate({ height: 'show', opacity:'show' }, s.fx); }
                                else
                                        { $(this).next(s.element).show().overflow(s.overflow); }
                                $(this).html(s.hide);
                        }
                        else
                        {
                                if(s.fx)
                                        { $(this).next(s.element).animate({ height: 'hide', opacity:'hide' }, s.fx); }
                                else
                                        { $(this).next(s.element).hide().overflow('hidden'); }
                                $(this).html(s.show);
                        }
                        this.blur();
                        return false;
                });
        });
        }
};
jQuery.fn.Xpander = jQuery.Xpander.build;

Notes

This plugin is still in early development, please send comments, suggestions, corrections to the author through the jQuery mailing list.

"Updated" - Now includes support for div's and iframes.

Tested In

• Windows
  • IE 6
  • IE 7
  • FF 1.5
  • Opera 9

• Mac
  • Safari
  • FF