Open up a tab from links on the same page

JavaScript
1

Hi all

I’ve been using a tabbing system for some time, works good.
What I need now is as an extra bit of functionality so I can click links anywhere on the page, not just the tabs and open the selected tab based on the ID.

I’ve started with the below js snippet though nothing is happening.
Is this the correct way to do things, how should I code this, any suggestions what I might be doing wrong?

I’ve minimised for viewing.

$("#gotoreview").click(function() {
        $("ul.tabs li").tabs({active: "#addReview"});
    });


<a id="gotoreview">open up tab</a>

<div>
    <ul class="tabs">
        <li><a href="#userReviews" title="">reviews</a></li>
        <li><a href="#addReview" title="">write a review</a></li>
    </ul>
</div>
<div class="tab_container">
    <div id="userReviews" class="tab_content">
        <h3>latest reviews</h3>

    </div>
    <div id="addReview" class="tab_content">
        <h3>share your comments</h3>

    </div>
</div>

Thanks, Barry

2

If it helps, here is the code I use for my tabs, with the new snippet at the bottom.


$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content

    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

    $("#gotoreview").click(function() {
        $("ul.tabs li").tabs({active: "#addReview"});
    });

});

Barry

3

In simple terms.
How do I get the below snippet to open up a tab?

$("#gotoreview").click(function() {
        $("ul.tabs li").tabs({active: "#addReview"});
    });

Hope this makes sense.

Thanks, Barry