Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
modified collapsible.js
* --------------------------------------------------------------------
* jQuery collapsible plugin
* Author: Scott Jehl,
* Copyright (c) 2009 Filament Group
* licensed under MIT (
* --------------------------------------------------------------------
* See:
* 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 {
.collapsible-heading .collapsible-heading-status {
$.fn.collapsible = function(){
return $(this).each(function(){
var collapsibleHeading = $(this);
var collapsibleContent =;
//modify markup & attributes
.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>');
.bind('collapse', function(){
.find(".collapsible-heading-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s")
.find('.collapsible-heading-status').text('Show ');
.bind('expand', function(){
.find(".collapsible-heading-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s")
.find('.collapsible-heading-status').text('Hide ');
if( $(this).is('.collapsible-heading-collapsed') ){
else {
return false;

jrochkind commented Nov 3, 2010

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.


jrochkind commented Nov 4, 2010

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment