How do I open a tab from with jQuery UI Tabs from an link outside of the div?

Question

This may be a little difficult to explain, but I'll try my best. I have a product page with two tabs, full description and video. These are done using jQuery UI Tabs.

Above this section of the page I have a product image with thumbnails...but I want one of the thumbnails to be a link to see the video (which of course is contained in the video tab).

If I load the page as site.com/product#video it does load up the correct tab...but when the tab is not active, and I use a link outside of the #tab div, (ex: Video), it doesn't do anything.

How can I get a link to open the tab if it's not contained in the #tab div?

CODE

This code is outside of the tabs, and needs to open the #video tab

<a href="#video">Open Video Tab</a>

Tabs Code

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="product-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover"><a href="#description">Full Description</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#video">Video</a></li>
</ul>
<div class="product-collateral">
    <div class="box-collateral box-description">
        <div id="description" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
           Content
        </div>
        <div id="video" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
            <h2 class="video">Video Content</h2>
        </div>
    </div>
</div>
</div>

Meany

do you have any code you can share with us? – Obscure

Added example code to the question. – Meany

You are going to have to give us more info. Right now it looks you will need to solve this with some jquery. a quick fix might to make that href absolute = hfef="site.com/product#video" if it work's that way. Otherwise you are going to need jquery to look for a hashchange. Send some links to like screenshots or a jfiddle? – Obscure

Dear Plz also see this if you could resolve it. #20091156 – Illhumored

Answer 1

What worked for me was this:

Html

<a href="#description" class="open-tab">Open Description Tab</a>
<a href="#video" class="open-tab">Open Video Tab</a>   

<div id="tabs">
    <ul>
        <li>
            <a href="#description">Full description</a>
        </li>
        <li>
            <a href="#video">Video content</a>
        </li>
    </ul>

    <div class="product-collateral">
        <div class="box-collateral box-description">
            <div id="description">
                Content
            </div>
            <div id="video">
                <h2 class="video">Video Content</h2>
            </div>
        </div>
    </div>
</div>

Javascript

$(document).ready(function () {
    $('#tabs').tabs();

    $('.open-tab').click(function (event) {
        var tab = $(this).attr('href');
        $('#tabs').tabs('select', tab);
    });
});

So what this does is provide a link to both the description and video tabs, which are selected when the link is clicked.

From here we can see that when selecting a particular tab, we can use either a zero-based index or the href fragment which points to the tab we wish to display.

This is why the href attributes of the a elements match up with the Ids of the div elements - when one is clicked its href fragment is then used to set the selected tab.

---

Update for jQuery UI 1.11

As jQuery UI has evolved, so to has the API for setting the active tab. As of jQuery UI 1.11, the following code will select the active tab:

//Selects by the zero-based index
$('#tabs').tabs("option", "active", index);

Now because we now have to provide a zero-based index, the code I initially provided will no longer work.

What we need now is an index that can actually be used. One approach is:

$('.open-tab').click(function (event) {
    var index = $("selector-of-clicked-tab").index();
    $('#tabs').tabs("option", "active", index);
});

Another is to use HTML5 data- attributes:

<a href="#description" class="open-tab" data-tab-index="0">Open Description Tab</a>
<a href="#video" class="open-tab" data-tab-index="1">Open Video Tab</a>

So you can do this when handling the click of these links:

$('.open-tab').click(function (event) {
    $('#tabs').tabs("option", "active", $(this).data("tab-index"));
});

Sky

I was able to get this working with your script here (see the video thumbnail): store.carbonfibergear.com/… But for some reason I am trying to do the same thing with the reviews link (under the thumbnails), and it's not working. Do you have any idea why not? – Meany

Try adding the class open-tab to the link you are clicking. My answer assumes that the links that are used to open the tabs will have that class. Also, this block of code: jQuery(document).ready(function () { jQuery('.yotpo .result_status').click(function(){ jQuery('#tabs').tabs('select', "reviews"); }); }); you should be able to delete as a result. If you wanted to you could also try changing reviews to #reviews to see if that works, but I think adding that class is the more general approach. – Sky

Thanks for the quick response, I unfortunately don't have the ability to add a class (the code is being pulled in from a plugin), which is why I'm using the .yotpo .result_status. I tried doing #reviews and had no luck. In theory it seems like it should work, but for some reason it's not. Any other ideas? – Meany

#reviews didn't work? That seems strange. I think at this point we need to be certain that the jQuery('.yotpo .result_status').click handler is actually executing. You could also try using the index-based approach, i.e., jQuery('#tabs').tabs('select', 2); – Sky

Still doesn't seem to work either way, but how can I check if the handler is executing? The only other thing I can see as an issue is that the link is going to #yoReviews, which is a div INSIDE of the #reviews tab...though I can't control the link, or the #yoReviews content. Do you think that could be causing the problem? Also, one more thing I'm thinking that could cause a problem...the way that link loads in after the site is loaded? – Meany

So the link loads after the page is loaded? That should be the problem, because the click handler won't be attached to anything. Try this: jQuery(document).on('click', '.yotpo .result_status', function() { jQuery('#tabs').tabs('select', "#reviews"); }); – Sky

Calling tabs.('select', ...) is no longer part of the tabs api, use gnarly or chuckfinley solution below. – Alcalde

select method is not working anymore, you have to use active option, jQuery( "#tabs" ).tabs( "option", "active", 1); – Sounder

Answer 2

use jQuery:

$( "#tabs" ).tabs({ active: tabNumber });

Remember, that the indexation starts from 0

Oviform

Can you got a little more in-depth, I'm not really sure I understand how I would utilize that to make it worth with a link outside of the div? – Meany

Answer 3

Using jquery, bind a click event to your link that opens the tab you want.

$('#tabopenlink').click(function() {
    $('#tabs').tabs({active: tabidx});
});

Rahman

Answer 4

I use mini plug-in.

    (function($) {
    $.fn.tabremote = function(options) {

          var settings = $.extend({
           panel: "#tabs",
           to: "data-to",
        }, options );

        $this=$(this);
        $panel=$(settings.panel);

    $this.click(function(){
                if($(this).attr("href"))
                    {var tos=$(this).attr("href");}
                else
                    {var tos=$(this).attr(settings.to);}

                to=tos.match(/\d/g);
    $panel.tabs({active: to-1});        
    return false;   
    });


        return this;
    }
})(jQuery);

Opens the tab using href or any element.

id panel must contain the number of the panel. Example (1-tabs, tabs-2, ...) Plugin subtracts 1 and open the panel. Tabs (active, (number of id -1))

Use

$("button.href").tabremote({panel:"#tabs",to:"data-href"});

panel:"#tabs" // container panel

to:"data-href" // attribute name with value

Jacobin

Answer 5

function openTabByLink(link) {
    $("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}

Reprimand

Answer 6

If you use twitter bootstrap instead of jquery ui, it will be very simple. Just add data-toggle="tab" and put the link wherever you want in the page:

 <a href="#video" data-toggle="tab">Open Video Tab</a>

Unpaid

Answer 7

For jQuery UI 1.11

HTML:

<div id="tabs">...</div>
...
<a href="#video" class="open-tab">Open Video Tab</a>

JS:

$('.open-tab').click(function () {
  $("#tabs").tabs('option','active',$('#tabs a.ui-tabs-anchor[href="'+$(this).attr('href')+'"]').index('#tabs a.ui-tabs-anchor'));
});

Corbel