jQuery click function only works on every second click

JavaScript
1

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 :slight_smile:

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);
      
  });
});
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.