CODEWITHSUNDEEP
jquerycssjquery-ui-tabs
LyleCrumbstorm
LyleCrumbstorm

Reputation: 171

Same height li within jQuery Tabs

I have cleaned up this question from yesterday in hopes that the problem will be clear. Below is a simple JS that finds the tallest li and then makes all li's that height. The problem occurs when the ul is placed within jQuery Tabs and ALL tab information shows up when the page loads under the first tab. Once you click on a tab (any tab) everything resolves itself and displays as it should. Why is this happening? How do I fix this?

The jsfiddle should make clear what the problem is.

jsfiddle

$(document).ready(function() {

var maxHeight = 0;

$('ul#list li').each(function() {
 maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);


$('.tabs .tab-links a').on('click', function(e)  {
  var currentAttrValue = $(this).attr('href');

  // Show/Hide Tabs
  $('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);

  // Change/remove current tab to active
  $(this).parent('li').addClass('active').siblings().removeClass('active');


  e.preventDefault();
  });
});

Upvotes: 0

Views: 549

Answers (2)

Marcelo Assis
Marcelo Assis

Reputation: 5194

While reading your question, I had the impression you wanted to keep all content divs at the same size, not only the clickable tabs.

I changed this snippet:

$('ul#list li').each(function() {
     maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);

To:

$('div.tab-content div.tab').each(function() {
     maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);

If it was the case: https://jsfiddle.net/x50zL2to/59/

Upvotes: 0

imnancysun
imnancysun

Reputation: 632

You just need to add $('.tab').hide();$('.tab.active').show(); after the list height setting line and leave

.tab.active {display:block;left: 0px;}

See jsfiddle

Upvotes: 2

Related Questions