modifying behavior of filament group's collapsible plugin (toggle hide on new select)

modifying behavior of filament group's collapsible plugin (toggle hide on new select)

i just found the filament group's take on an accordion effect yesterday, and i really like it. the authors have really thought out the progressive enhancement requirements for ensuring accessibility to a degree that the original jQuery accordion does not yet.

however, the default behavior is to leave a selection expanded until you click it a second time, rather than collapsing it when you select a new header.


i've modified the relevant code thusly. original:
  1. .click(function(){ 
  2. if( $(this).is('.collapsible-heading-collapsed') ){
  3. $(this).trigger('expand'); 
  4. }
  5. else {
  6. $(this).trigger('collapse'); 
  7. }
  8. return false;
  9. })
  10. .trigger('collapse');
modified:
  1. .click(function(){
  2. var collapseAll = $('.collapsible-heading');
  3. for (var i = 0; i < collapseAll.length; i++);
  4. collapseAll.trigger('collapse');
  5. {
  6. if( $(this).is('.collapsible-heading-collapsed') ){
  7. $(this).trigger('expand'); 
  8. }
  9. else {
  10. $(this).trigger('collapse'); 
  11. }
  12. return false;
  13. }
  14. })
  15. .trigger('collapse');
this achieved the desired behavior, except now when the user clicks an expanded item's header, it closes for only a moment and then reopens -- it's ignoring the 'else' statement. i'm just beginning to learn Javascript, and haven't even started learning the jQuery specific way of doing things, so i'm really stuck trying to troubleshoot this.

any takers? see my website to see it in action, and feel free to use my modifed version of the enhanced.css & the custom pointer image if you like it (just let me know if you do).

cheers,

--cz