Switch to New Tab Based on Click of a hyperlink

Question

On the product page of an ecommerce store I'm trying to switch to another tab based on the click of a hyperlink.

So from a product description, I have a "Read the FAQ" link, that once clicked, I would like to automatically switch to the FAQ tab.

See here: http://www.lifestyleclotheslines.com.au/austral-addaline-35-foldown-clothesline

I tried to replicate the basics of this fiddle but didn't have much luck, I'm sure I was doing something wrong.

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

    $('#showTab1').click(function() {
        $('#myTabs').tabs('select', '#tabone');
    });

    $('#showTab2').click(function() {
        $('#myTabs').tabs('select', '#tabtwo');
    });
});

http://jsfiddle.net/zEwQz/495/

Any help would be awesome.

Thanks!

Answer 1

<div id="myTabs">    
    <ul  class="tabs">
        <li><a href="#tabone">Tab One</a></li>
        <li><a href="#tabtwo">Tab Two</a></li>
        <li><a href="#faqtab">Faq Tab</a></li>
    </ul>

    <div id="tabone">You've selected Tab 1</div>
    <div id="tabtwo">You've selected Tab 2</div>
    <div id="faqtab">You've selected Faq Tab</div>
</div>

<a href="#" id="showFaqTab">Read the FAQ</a>

<input type="button" id="showTab1" value="Show tab 1"/>
<input type="button" id="showTab2" value="Show tab 2"/>



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

        $('#showTab1').click(function() {
            $('#myTabs').tabs('select', '#tabone');
        });

        $('#showTab2').click(function() {
            $('#myTabs').tabs('select', '#tabtwo');
        });
        $('#showFaqTab').click(function() {
            $('#myTabs').tabs('select', '#faqtab');
        });
    });

Not Sure what are you looking for. Please have a look on the updated fiddle

http://jsfiddle.net/zEwQz/500/

Answer 2

You are having same id attribute for both anchor link and the button ie (there would be unique ID for an element on the web page)

<a href="#" id="showTab2">Read the FAQ</a>

<input type="button" id="showTab2" value="Show tab 2"/>

Try to change it and it will work.

<a href="#" id="lnkshowTab2">Read the FAQ</a>

<input type="button" id="showTab2" value="Show tab 2"/>



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

    $('#showTab1').click(function() {
        $('#myTabs').tabs('select', '#tabone');
    });

    $('#showTab2').click(function() {
        $('#myTabs').tabs('select', '#tabtwo');
    });

        $('#lnkshowTab2').click(function() {
        $('#myTabs').tabs('select', '#tabtwo');
    });
});

DEMO