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.

Answer 1

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>

Answer 2

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

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

Answer 3

use jQuery:

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

Remember, that the indexation starts from 0

Answer 4

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

Answer 5

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'));
});

Answer 6

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