how to link directly to jQuery accordion tab

Question

I have a wordpress theme that has a build in shortcode for creating an tabbed interface. The problem is that I can't link from an external page to a specific tab. I saw that there are multiple questions about the same issue, but no answer worked for me. I have to mention that my javascript / jQuery skills are close to zero so even if this might seem simple, I have no idea what to do.

I found the jQuery code responsible for the accordion tabs in a file in my theme, here it is:

// ---------------------------------------
// TAB
// ---------------------------------------
function base_tab() {
$('.tabs-wrap').each(function(){
    var tab_group = $('.tabs-wrap');
    $('.tabs li', tab_group).click(function(e){
        e.preventDefault();
        $('.tabs a', tab_group).removeClass('current');
        $('a', this).addClass('current');

        $('.panes .pane', tab_group).hide();
        $('.panes .pane', tab_group).eq($(this).index()).show();
    });

    // Trigger Initial Tab
    var initial_tab = parseInt( $('.tabs', this).attr('initial-tab') );
    $('.tabs li', tab_group).eq(initial_tab).trigger('click');
});
}

As far as I understood from previous, similar questions I need to add this code but I can't figure out on my own where and how to make it work:

$(window.location.hash).click();

All the links to the tabs are currently like this: http://www.websitename.com/page/#

I'll appreciate any help, thanks!

James · Accepted Answer · 2012-07-04T18:22:25.143

1

First change your html into this

<ul class="tabs" initial-tab="0">
   <li><a href="#all">All</a></li>
   <li><a href="#kids">Kids Place &#8211; Kidproof</a></li>
   <li><a href="#baby">Baby Rattle Toy</a></li>
   <li><a href="#kidsvideo">Kids Place Video Player</a></li>
   <li><a href="#letter">Letters With Ally</a></li>
   <li><a href="#mommy">Mommy bird and her chick</a></li>
</ul>

Then write some extra code

$(function(){
   var hash = window.location.hash;
   var anchor = $('a[href$="'+hash+'"]');
   if (anchor.length > 0){
      anchor.click();
   }
});

edited Jul 04 '12 at 18:22

answered Jul 04 '12 at 17:44

James

13,571
6
61
83

I can't get them to work. This is the website and page in question: http://kiduniya.com/reviews/ – George Grigorita Jul 04 '12 at 18:04
Wel because you have not use jquery ui tabs :(. in this case you have to implement hash check and open correct tab based on hash Or just use http://jqueryui.com/demos/tabs/ – James Jul 04 '12 at 18:12
Let's check again @GeorgeGrigorita – James Jul 04 '12 at 18:17
It's a wordpress site and I have a shortcode to generate the tabs. To make a new tab I have to write `[tab title=name]text[/tab]` and I've wrapped the code in `a href`, now the code looks like this `[tab title='Mommy bird and her chick']`. I've also added the script bit to the javascript file. Unfortunately it's still not working. – George Grigorita Jul 04 '12 at 18:33
This should start after all other script is loaded, so put my code below all of them. It's basically just check the hash when page loaded and click it if possible. If you can copy to jsfiddle I can check if something wrong – James Jul 05 '12 at 01:12
I just realized that a wasn't putting the link where I should, that's why the js didn't pick it up. I was using `[tab title='Mommy bird and her chick']` when I should use `[tab title='Mommy bird and her chick']` - with the link inside the shortcode. Thanks for the help! – George Grigorita Jul 05 '12 at 09:51

how to link directly to jQuery accordion tab

1 Answers1

Linked