SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Threaded View

  1. #1
    SitePoint Enthusiast seezee's Avatar
    Join Date
    Jun 2010
    Location
    Oklahoma, USA
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Further refinements to jQuery Filament Group Collapsible Plugin

    I started a thread here about the 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'):
    Code:
    $(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:
    Code:
    $(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\templates\faq\test.htm and click the 1st or second link -- you'll be directed to collapsible\templates\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.
    Attached Files Attached Files


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •