I’m using a jQuery tab plugin which adapts the tab container height dependent on its contents. Within some of the tab containers are a second set of tabs (using different scripts) and so when navigating the second set of tabs I need the parent tab height to change accordingly.
The parent tab heights are only triggered to change when clicking on the parent tab navigation and so I’ve added a click function to the child tab navigation elements to check the height of the parent tab container and change accordingly.
It seems to work apart from the fact that I need to click on the child tab navigation elements twice before the parent tab height will change.
You can see what I’m working with here - http://www.space-heat.com.gridhosted.co.uk/prices/ - if you select the kitchens tab the first time it’ll open the kitchens tab and then a second click will adjust the height of the parent tab container.
So can anyone suggest why it’s only working on the second click please? Any suggestions would be greatly appreciated
Here’s the jQuery for the parent tabs:
//Prices page tabs
// Variables
var clickedTab = $(".tabs > .active");
var tabWrapper = $(".tab__content");
var activeTab = tabWrapper.find(".active");
var activeTabHeight = activeTab.outerHeight();
// Show tab on page load
activeTab.show();
// Set height of wrapper on page load
tabWrapper.height(activeTabHeight*0.7);
$(".tabs > li").on("click", function() {
// Remove class from active tab
$(".tabs > li").removeClass("active");
// Add class active to clicked tab
$(this).addClass("active");
// Update clickedTab variable
clickedTab = $(".tabs .active");
// fade out active tab
activeTab.fadeOut(250, function() {
// Remove active class all tabs
$(".tab__content > li").removeClass("active");
// Get index of clicked tab
var clickedTabIndex = clickedTab.index();
// Add class active to corresponding tab
$(".tab__content > li").eq(clickedTabIndex).addClass("active");
// update new active tab
activeTab = $(".tab__content > .active");
// Update variable
activeTabHeight = activeTab.outerHeight();
// Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function() {
// Fade in active tab
activeTab.delay(50).fadeIn(250);
});
});
});
And this is the click function I wrote to reset the parent tab container height when clicking on the second set of tabs within the parent tabs.
$(".tab__content .su-tabs-nav span").click(function() {
// Update variable
activeTabHeight = activeTab.outerHeight();
// Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function() {
// Fade in active tab
activeTab.delay(50).fadeIn(250);
});
});