Script to Make Anchor Links Work Within Accordions

I found a lot of suggested solutions online to this problem, but none of them worked for my purposes, so I wrote this. Hope it helps others…

   /*except for the minimize and maximize links, add special class to all anchor links*/
        if (!$('a').hasClass('maximize' && 'minimize')) {
        $('a[href*="#"]').attr('class' , 'accordion-anchor');
        }
        /*wrap accorion header-content pairs*/
        $("#accordion h3.ui-accordion-header").each(function() {
        $(this).nextUntil("h3.ui-accordion-header").andSelf().wrapAll("<div class='accordion-pair'></div>");
        });
        /*Add script trigger to anchor link*/
        $('.accordion-anchor').each(function() {
        $(this).bind('click',function(){
         var target = $(this).attr('href');
         var header = $(target).parents('.accordion-pair').find('h3.ui-accordion-header');
         header.click();
        });
        });

If you need to see my html markup to parse this, let me know in a comment. My markup is the standard accordion.js structure so I think this will make sense to many of you without the markup.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s