Switch tab forcefully on link click

Question

What I'm trying to achieve is I have an anchor link outside of the tab container. I put another link on with the same ID in TAB2. So when user click on the link it should switch to TAB 2. Right now it happens nothing. Here the code bellow.

 $(".tab_content").hide(); $(".tab_content:first").show(); $("ul.tabs li").click(function () { $(".tab_content").hide(); var activeTab = $(this).attr("rel"); $("#" + activeTab).fadeIn(); $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab-drawer-heading").removeClass("d_active"); $(".tab-drawer-heading[rel^='" + activeTab + "']").addClass("d_active"); });

 #topic-tabs { padding: 60px 0; } #topic-tabs.wrapper.tabs-sec ul.tabs { margin: 0; padding: 0; list-style: none; height: auto; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; margin-bottom: 0px; padding-bottom: 20px; } #topic-tabs.wrapper.tabs-sec ul.tabs li { cursor: pointer; /* padding: 15px 15px; */ background-color: #e9e9e9; color: #333; border: 1px solid #e9e9e9; overflow: hidden; position: relative; min-width: 200px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 5px; margin: 0 4px; font-size: 14px; font-weight: 500; } #topic-tabs.wrapper.tabs-sec ul.tabs li span { color: #fff; background: #e2251d; border-radius: 50%; height: 20px; width: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-left: 5px; } #topic-tabs.wrapper.tabs-sec ul.tabs li:hover { background-color: #f7941d; color: #fff; border-color: #f7941d; } #topic-tabs.wrapper.tabs-sec ul.tabs li:hover span { color: #fff; } #topic-tabs.wrapper.tabs-sec ul.tabs li.active { background-color: #fff; color: #333; border-color: #f7941d; } #topic-tabs.wrapper.tabs-sec.tab-container { border: 1px solid #e9e9e9; clear: both; width: 100%; background: #fff; overflow: auto; border-radius: 5px; } #topic-tabs.wrapper.tabs-sec.tab-container.tab_content { padding: 30px; display: none; }

 <br><br> <div> <a href="#topic1">Click for Topic 1</a> </div> <section id="topic-tabs"> <div class="wrapper"> <div class="tabs-sec"> <ul class="tabs"> <li class="active" rel="tab1">TAB 1</li> <li rel="tab2">TAB 2</li> </ul> <div class="tab-container"> <div id="tab1" class="tab_content"> <div class="agenda-sec"> <h5>Some text</h5> </div> </div> <div id="tab2" class="tab_content"> <div class="agenda-sec"> <a href="#" id="topic1">Topic 1</a> </div> </div> </div> </div> </div> </section> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

I tried many methods and it is not working. Can anyone help please?

Answer 1

You can try it...

 $(".tab_content").hide(); $(".tab_content:first").show(); $("#outsideTabe").click(function () { var activeTab = $(this).attr("rel"); showHideContent(activeTab); }); $("ul.tabs li").click(function () { var activeTab = $(this).attr("rel"); showHideContent(activeTab); }); function showHideContent(activeTab){ var activeTab = activeTab; $(".tab_content").hide(); $("#" + activeTab).fadeIn(); $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab-drawer-heading").removeClass("d_active"); $(".tab-drawer-heading[rel^='" + activeTab + "']").addClass("d_active"); }

 #topic-tabs { padding: 60px 0; } #topic-tabs.wrapper.tabs-sec ul.tabs { margin: 0; padding: 0; list-style: none; height: auto; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; margin-bottom: 0px; padding-bottom: 20px; } #topic-tabs.wrapper.tabs-sec ul.tabs li { cursor: pointer; /* padding: 15px 15px; */ background-color: #e9e9e9; color: #333; border: 1px solid #e9e9e9; overflow: hidden; position: relative; min-width: 200px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 5px; margin: 0 4px; font-size: 14px; font-weight: 500; } #topic-tabs.wrapper.tabs-sec ul.tabs li span { color: #fff; background: #e2251d; border-radius: 50%; height: 20px; width: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-left: 5px; } #topic-tabs.wrapper.tabs-sec ul.tabs li:hover { background-color: #f7941d; color: #fff; border-color: #f7941d; } #topic-tabs.wrapper.tabs-sec ul.tabs li:hover span { color: #fff; } #topic-tabs.wrapper.tabs-sec ul.tabs li.active { background-color: #fff; color: #333; border-color: #f7941d; } #topic-tabs.wrapper.tabs-sec.tab-container { border: 1px solid #e9e9e9; clear: both; width: 100%; background: #fff; overflow: auto; border-radius: 5px; } #topic-tabs.wrapper.tabs-sec.tab-container.tab_content { padding: 30px; display: none; }

 <br> <div> <a href="#tab2" rel="tab2" id="outsideTabe">Click for Topic 1</a> </div> <section id="topic-tabs"> <div class="wrapper"> <div class="tabs-sec"> <ul class="tabs"> <li class="active" rel="tab1">TAB 1</li> <li rel="tab2">TAB 2</li> </ul> <div class="tab-container"> <div id="tab1" class="tab_content"> <div class="agenda-sec"> <h5>Some text</h5> </div> </div> <div id="tab2" class="tab_content"> <div class="agenda-sec"> <a href="#" id="topic1">Topic 1</a> </div> </div> </div> </div> </div> </section> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 2

This worked for me,

<div> <a href="#topic1" class="min-link">Click for Topic 1</a> </div>

$(".min-link").click(function(){

 $(".tab_content").hide();
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn();

    $("ul.tabs li").removeClass("active");

$(".tabs li").each(function (index) {
if($(this).attr("rel")==activeTab)
{
 $(this).addClass("active");
}
});

    $(".tab-drawer-heading").removeClass("d_active");
    $(".tab-drawer-heading[rel^='" + activeTab + "']").addClass("d_active");

});