Expand/contract based on height of content

Expand/contract based on height of content

Hi all, I need to amend a small script that creates tabbed <div>s with content that varies in height. At the moment from what I can gather the boxes are all given the same maximum height based on the tallest content which can vary dramatically.

Any help will be appreciated! Here is the script...

  2. function createProductTabs() {
  3. var maxHeight = 0;
  4. var $tabs = $('<ul id="product-tabs" />');
  5. var $details = $('#product-details');
  7. $details.find('h2').each(function() {
  8. $this = $(this);
  9. $('<li />')
  10. .append($('<a class="txtWhite noUnderline" />').html($this.text()).attr('href', '#' + $this.parent().attr('id')))
  11. .appendTo($tabs);
  12. maxHeight = ($this.parent().height() > maxHeight) ? $this.parent().height() : maxHeight;
  13. $this.remove();
  14. });
  15. $details
  16. .addClass('bgGradient tabbed')
  17. .css('height', maxHeight + 'px')
  18. .children()
  19. .filter(':first')
  20. .addClass('current')
  21. .end()
  22. .filter(':not(:first)')
  23. .hide();
  24. $tabs
  25. .find('li:first-child a')
  26. .removeClass('txtWhite')
  27. .addClass('txtOrange current')
  28. .end()
  29. .find('li:last-child')
  30. .addClass('last-child')
  31. .end()
  32. .insertBefore($details)
  33. .find('a')
  34. .click(function() {
  35. $this = $(this);
  36. $current = $('#product-tabs .current');
  37. $this
  38. .removeClass('txtWhite')
  39. .addClass('current txtOrange');
  40. $current
  41. .removeClass('current txtOrange')
  42. .addClass('txtWhite');
  43. $($current.attr('href')).fadeOut('fast', function() {
  44. $($this.attr('href')).fadeIn('fast');
  45. });
  46. return false;
  47. });
  48. }

    • Topic Participants

    • mike