Issue with tab links inside tabs
Hi all,
I am very new to jquery and it is the first time posting on here.
I have an issue with links that are within one tab not opening the other tabs when they are clicked, the href changes but the content does not open.
I have tried reloading the page and replacing the href but to no avail and I have tried to write code that makes the relevant li class="active" to make the content show using parent(), closest() but I dont have the know how to get it right.
Example html below:
<div class="fusion-one-full fusion-layout-column fusion-column-last fusion-spacing-yes" style="margin-top:0px;margin-bottom:20px;"><div class="fusion-column-wrapper"><div class="fusion-tabs fusion-tabs-1 classic horizontal-tabs"><div class="nav"><ul class="nav-tabs nav-justified">
<li class="active">
<a class="tab-link" id="outboardwarehouse" href="#tab-be6a964093aa442cce9" data-toggle="tab">
<h4 class="fusion-tab-heading">Outboard Warehouse</h4></a></li><li><a class="tab-link" id="mariner" href="#tab-50aad72f426c8f8fed1" data-toggle="tab">
<h4 class="fusion-tab-heading">Mariner</h4></a></li><li><a class="tab-link" id="tohatsu" href="#tab-30324da9d1da8164f54" data-toggle="tab">
<h4 class="fusion-tab-heading">Tohatsu</h4></a></li><li><a class="tab-link" id="parsun" href="#tab-0df14fb661cbf73bc48" data-toggle="tab">
<h4 class="fusion-tab-heading">Parsun</h4></a></li><li><a class="tab-link" id="flover" href="#tab-96588a3a0ce8b24ee6c" data-toggle="tab">
<h4 class="fusion-tab-heading">Flover</h4></a></li><li><a class="tab-link" id="usedoutboards" href="#tab-68f778000680afeab8c" data-toggle="tab">
<h4 class="fusion-tab-heading">Used Outboards</h4></a></li><li><a class="tab-link" id="torqeedo" href="#tab-e38a772595807971caa" data-toggle="tab">
<h4 class="fusion-tab-heading">Torqeedo</h4></a></li></ul></div><div class="tab-content">
<div class="tab-pane fade in active" id="tab-be6a964093aa442cce9">
<div class="fusion-content-boxes content-boxes columns fusion-columns-3 fusion-content-boxes-1 content-boxes-icon-on-top row content-left mariner" style="margin-top:0px;margin-bottom:60px;">
<div class="fusion-column content-box-column content-box-column-1 col-lg-4 col-md-4 col-sm-4">
<div class="col content-wrapper-background fusion-animated" style="background-color:#ffffff;" data-animationType="slideInDown" data-animationDuration="0.1">
<div class="heading heading-with-icon icon-left">
<a class="heading-link" href="
http://higham.imps-testdomain.co.uk/outboard-warehouse/tab-50aad72f426c8f8fed1" target="_self"><div class="image"><img src="
http://higham.imps-testdomain.co.uk/wp-content/uploads/2015/06/mariner.jpg" width="150" height="150" alt="" /></div></a></div><div class="fusion-clearfix"></div><div class="content-container">Your Content Goes Here<a class="fusion-read-more" href="
http://higham.imps-testdomain.co.uk/outboard-warehouse/#tab-50aad72f426c8f8fed1" target="_self">View Products</a><div class="fusion-clearfix"></div></div></div></div>
I have only included one of the links that is situated in the first tab as I did not want to post a huge amount of code but I do have links to all the other tabs too.
I need to make the relevant content open <div class="tab-pane fade in active" id="tab-be6a964093aa442cce9"> when I click on <a class="heading-link" href="
http://higham.imps-testdomain.co.uk/outboard-warehouse/#tab-50aad72f426c8f8fed1" target="_self">. I think the code "fade in active" is inserted on when the containing li class="active" is triggered.
Some of the code for the tabs that is inserted in main.js is below:
jQuery( '.fusion-tabs' ).fusion_switch_tab_on_link_click();
//On Click Event
jQuery(".nav-tabs li").click(function(e) {
var clicked_tab = jQuery(this);
var tab_content_to_activate = jQuery(this).find("a").attr("href");
var map_id = clicked_tab.attr('id');
setTimeout( function(){
clicked_tab.parents( '.fusion-tabs' ).find( tab_content_to_activate ).find( '.shortcode-map' ).each(function() {
jQuery( this ).reinitialize_google_map();
});
if( clicked_tab.parents( '.fusion-tabs' ).find( tab_content_to_activate ).find( '.fusion-carousel' ).length ) {
generate_carousel();
}
clicked_tab.parents( '.fusion-tabs' ).find( tab_content_to_activate ).find( '.fusion-portfolio' ).each( function() {
jQuery( this).find( '.fusion-portfolio-wrapper' ).isotope();
});
Any help at all or pointing in the right direction would be much appreciated.
Thank you
Nic