Further refinements to jQuery Filament Group Collapsible Plugin

JavaScript
1

I started a thread here about the [URL=“http://www.filamentgroup.com/lab/expand_and_collapse_content_accessibly_with_progressive_enhancement_jquery/”]Filament Group’s Collapsible Plugin, wherein I modified the plugin to hide any exposed content when an new header is clicked, but I wanted to make it even better, by expanding hidden content if a user arrives at a page via a link with a url fragment identifier. I’ve got it working partially, but could use some help.

The 1st thing I needed to do was add IDs to all the header elements. I discovered that in Chrome, the page was rendering before the IDs got inserted, so to solve that I moved the code to a separate file that executes before the plugin. Here’s that code (‘fragment.js’):

$(function(){
    $('h5.accordion').each(function(index) {
     $(this).attr({
        'id': 'faq-' + index
     });
  });
});

After that, I modified example.js (renamed collapsible.js in my test suite) like this:

$(function(){
	$('h5.accordion').collapsible();
//  open the content that matches the hash
	var hash = window.location.hash;
	var thash = hash.substring(1);
	$('#faq').find('h5[id*='+ thash + ']').trigger('click');
});

This works fine if the link to the fragment is on a different page than the collapsible content, but if the link is on the same page, the collapse/expand events fail. I think it’s because clicking a link with a url fragment doesn’t send a server request – it just fires off a ‘scroll this page’ instruction client-side. So even though the url in the address bar changes, any expanded content stays open, and the target doesn’t expand.

I’m attaching a ZIP if anyone wants to look at this. Navigate to collapsible\ emplates\faq\ est.htm and click the 1st or second link – you’ll be directed to collapsible\ emplates\faq\index.htm and the page will scroll to the correct item and expand it.

Now try clicking the link at the top of index.htm (Test Link 1) or the one inside Details 3 (Test Link 2). The page will scroll, but any expanded content will remain so & the target won’t expand.

Also, if you open index.htm without a fragment in the url, the last item will already be expanded, which it shouldn’t be.

Other relevant code is on the other thread, so I won’t repost it here.

2

I did some further testing & discovered some anomalous behavior. I’m using the script on my FAQ page. If the url ends with either the fragment #faq-1 or #faq-2, and the referring link is from an external page, the page scrolls to the correct position, but expands the wrong content. For #faq-1, it expands #faq-19, and for #faq-2, it expands #faq-22. For all other fragments the script acts as expected, as long as the referring link is from a different page (as outlined in the 1st post, links on the same page do not expand the correct content).

It seems the script is finding too many matches and expanding them serially, then stopping at the last possible match (if there were a sufficient number of questions on the page, it would expand #faq-29 instead of #faq-22). Presumably, if there were 35 questions on the page, a link to #faq-3 would expand the wrong answer as well.

I don’t know how to limit the action to an exact match only.

$(function(){
	$('h5.accordion').collapsible();
//  open the content that matches the hash
	var hash = window.location.hash;
	var thash = hash.substring(1);
	$('#faq').find('h5[id*='+ thash + ']').trigger('click');
});

Thanks for looking,

–cz