I’ve modified the Filament Group’s jQuery Collapsible plugin so it would close any open elements when an new one is clicked to open. I’m using this plugin instead of the standard jQuery accordion because of how it handles accessibility issues.
But now, when a user clicks an already ‘open’ element to close it, the element closes momentarily & then opens again. Not the desired behavior. It appears that the ‘else’ statement that handles this is being incorrectly interpreted (or rather, I’m passing the wrong data).
here’s the section of the code before modification:
//events
collapsibleHeading
.bind('collapse', function(){
$(this)
.addClass('collapsible-heading-collapsed')
.find('.collapsible-heading-status').text('Show ');
collapsibleContent.slideUp(function(){
$(this).addClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',true);
});
})
.bind('expand', function(){
$(this)
.removeClass('collapsible-heading-collapsed')
.find('.collapsible-heading-status').text('Hide ');
collapsibleContent
.slideDown(function(){
$(this).removeClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',false);
});
})
.click(function(){
if( $(this).is('.collapsible-heading-collapsed') ){
$(this).trigger('expand');
}
else {
$(this).trigger('collapse');
}
return false;
})
.trigger('collapse');
and after:
//events
collapsibleHeading
.bind('collapse', function(){
$(this)
.addClass('collapsible-heading-collapsed')
.find('.collapsible-heading-status').text('Show ');
collapsibleContent.slideUp(function(){
$(this).addClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',true);
});
})
.bind('expand', function(){
$(this)
.removeClass('collapsible-heading-collapsed')
.find('.collapsible-heading-status').text('Hide ');
collapsibleContent
.slideDown(function(){
$(this).removeClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',false);
});
})
.click(function(){ //next 3 lines added by me to close expanded item when new item selected
var collapseAll = $('.collapsible-heading');
for (var i = 0; i < collapseAll.length; i++);
collapseAll.trigger('collapse');
{
if( $(this).is('.collapsible-heading-collapsed') ){
$(this).trigger('expand');
}
else {
$(this).trigger('collapse');
}
return false;
}
})
.trigger('collapse');
and the html:
<div id="faq">
<h5 class="accordion">Details</h5>
<ul>
<li>purple-flower.tif purple-flower.tif purple-flower.tif</li>
<li>flower-photos.zip flower-photos.zip flower-photos.zip</li>
</ul>
<h5 class="accordion">Details 2</h5>
<ul>
<li>purple-flower.tif</li>
<li>flower-photos.zip</li>
</ul>
<h5 class="accordion">Details 3</h5>
<ul>
<li>purple-flower.tif</li>
<li>flower-photos.zip</li>
</ul>
</div>
I know, why haven’t I asked this on the jQuery forum? I have, but the fact is, you guys are much more responsive & helpful.
Oh yeah, here’s the page where I’m trying to get this to work.
Thanks,
–cz