modified collapsible.js

jQuery.collapsible.js

/**
 * --------------------------------------------------------------------
 * jQuery collapsible plugin
 * Author: Scott Jehl, scott@filamentgroup.com
 * Copyright (c) 2009 Filament Group 
 * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
 * --------------------------------------------------------------------
 *
 * See: http://dwpe.googlecode.com
 * http://filamentgroup.com/lab/expand_and_collapse_content_accessibly_with_progressive_enhancement_jquery/
 *
 * some local changes by jrochkind, eventually would like to publish these as a 
 * fork. For now, just diff this against a version from the repo to see changes
 * I guess. 
 *
 * Requires these CSS to be defined:
    .collapsible-heading {
     position: relative;
    }
    .collapsible-heading .ui-icon {
     margin-top:-8px;
     position:absolute;
     top:50%;
    }
    .collapsible-heading .collapsible-heading-status {
      padding-left:1.4em; 
    }
 */
$.fn.collapsible = function(){
	return $(this).each(function(){
	
		//define
		var collapsibleHeading = $(this);
		var collapsibleContent = collapsibleHeading.next();
		
		//modify markup & attributes
		collapsibleHeading.addClass('collapsible-heading')
			.prepend('<span class="collapsible-heading-status"></span>')
      .prepend('<span class="collapsible-heading-icon ui-icon ui-icon-triangle-1-s"/>')
			.wrapInner('<a href="#" class="collapsible-heading-toggle"></a>');
			
		collapsibleContent.addClass('collapsible-content');
		
		//events
		collapsibleHeading	
			.bind('collapse', function(){
				$(this)
					.addClass('collapsible-heading-collapsed')
          .find(".collapsible-heading-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s")
          .end()
					.find('.collapsible-heading-status').text('Show ');
										
				collapsibleContent.slideUp(function(){            
					$(this).addClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',true).hide();
				});
			})
			.bind('expand', function(){
				$(this)
					.removeClass('collapsible-heading-collapsed')
          .find(".collapsible-heading-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s")
          .end()
					.find('.collapsible-heading-status').text('Hide ');
										
				collapsibleContent
					.slideDown(function(){
						$(this).removeClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',false).show();
					});
			})
			.click(function(){ 
				if( $(this).is('.collapsible-heading-collapsed') ){
					$(this).trigger('expand'); 
				}	
				else {
					$(this).trigger('collapse'); 
				}
				return false;
			})
			.trigger('collapse');
	});	
};	

Changed from original Filmanet version to:

1. Use ThemeRoller triangle icons for expand-contract triangles. This requires inserting a span element before the link. I also manually set the style on this collapse element to float:left, which is kind of hacky, but one of my goals was avoiding the need for any additional CSS dependencies to make the collapsible element work, so I chose to inline it instead of depending on declaring a separate style to do it.

2. Explicitly calls show() and hide() on the content, again to eliminate the need for any additional CSS dependencies.

As a result, this js file alone will give you great collapsible behavior, no need to install any additional CSS or image files in your app whatseover, just this js file will do it. The previous classes are still left in place in case you do want to supply custom styles, however.

Thanks to Scott/Filament for the code and the MIT license.

Okay, I gave up on not requiring any external CSS at all. The Theme Roller triangle wasn't displaying right, no way to make it display right without some more complex CSS.

I based the CSS to make the triangle icon display properly off the JQuery-UI accordion.

This starts to get more complicated, alas. JQuery-UI/ThemeRoller icons are a bit hacky, in the end.