Search code examples
jqueryjquery-ui-tabsjquery-tools

jQuery Tools Tabs - Link to tab from another text link?


I am using jQuery Tools Tabs ... I am needing to open tabs from a separate link on the same page. Here is my code I am trying.

jQuery(function($){

        $('#accord1trig').click(function(){
              $(".accordion").tabs('selected', 1);
        });

        $('#accord2trig').click(function(){
              $(".accordion").tabs('selected', 2);
        });

        $('#accord3trig').click(function(){
              $(".accordion").tabs('selected', 3);
        });

        $('#accord4trig').click(function(){
              $(".accordion").tabs('selected', 4);
        });

});

and the html is as follows

<a href="#" id="accord1trig">Tab Link 1</a>
<a href="#" id="accord2trig">Tab Link 2</a>
<a href="#" id="accord3trig">Tab Link 3</a>
<a href="#" id="accord4trig">Tab Link 4</a>

Solution

  • Assuming your "separate link" is:

    <a href="#" id="click-me">Click me</a>
    

    and you want it to open "Tab Link 1", you'd change the first jQuery .click() in your script to:

    jQuery(function($){
    
        $('#accord1trig, #click-me').click(function(){
              $(".accordion").tabs('selected', 1);
        });
    
        // Remainder of your code...
    
    });
    

    See how I comma-separated and added #click-me to the selector there?

    Update:

    Based on the URL you provided, the following worked for me:

    <script type='text/javascript'>
    jQuery(function(){
        jQuery('h4 a[data-tab]').click(function(e){
            e.preventDefault();
            var tab = jQuery('.accordion-toggle:eq(' + (parseInt(jQuery(this).data('tab')) - 1) + ')');
            tab.triggerHandler('click').addClass('current');
        });
    });
    </script>