title: jQuery Examples – Horizontal Accordion - Table instead of Un-ordered Lists - UPDATED
body: <p><strong>Ok I got it working for anyone who needs this :)</strong></p>
  
  <p>[Original Statement/Question] <br />
  <em>Here is and example of what I'm trying to do (But on click not hover): <a href="http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/" rel="nofollow noreferrer">The Example</a></em></p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          // Get original font size
          var originalFontSize = $('html').css('font-size');
  
          // Get active column
          var activeColumn = $(".activeColumn");
  
          // Set max width using percentage %
          var maxWidth = 50;
  
          // Get width % ratio for min width by getting the children (count) in the header
          var table_header_children = $('tr:first-child').children().size();
  
          // Divide the column header count by 100 to get the average width
          var table_column_width_average = (100 / table_header_children);
  
          // Get the outer height of the header
          var table_header_height = $('th').outerHeight();
  
          // Set min width for the columns
          var minWidth = table_column_width_average;
  
          // Animate table by clicking the table header ( &lt;th&gt; )
          $("tr th").click(function(){
              if ($(this).hasClass('correct_text_spacing')) {
                  // Check for double click, do nothing
                  var doubleClicked = true;
              }
              else {
                  // Animates the last active column
                  $(activeColumn).animate({
                      width: minWidth + "%"
                  }, {
                      queue: false,
                      duration: 600
                  });
  
                  // Animates the table header
                  $(this).animate({
                      width: maxWidth + "%"
                  }, {
                      queue: false,
                      duration: 600
                  });
  
                  activeColumn = this;
  
                  // Reset the table header CSS
                  $('tr:first-child').children().css({
                      'width': minWidth,
                      'overflow': 'hidden',
                      'white-space': 'nowrap',
                      'height': table_header_height
                  });
  
                  // Remove class if found
                  $('table.tbl tr').children().removeClass('correct_text_spacing');
  
                  // Reset the font size to zero
                  var index = $(this).parent().children().index(this);
                  $('table.tbl tr').each(function(){
                      $(':nth-child(' + (index + 1) + ')', this).css('font-size', '0px');
                  });
  
                  // Fix text spacing on selected column
                  var index = $(this).parent().children().index(this);
                  $('table.tbl tr').each(function(){
                      $(':nth-child(' + (index + 1) + ')', this).addClass('correct_text_spacing').animate({
                          fontSize: originalFontSize
                      }, {
                          queue: true,
                          duration: 950
                      });
                  });
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .tbl {
          table-layout: fixed;
          border-top: 5px solid #ccc;
          border-collapse: collapse;
          background: #fff;
          width: 100%;
      } .tbl td {
          border: 1px solid #ccc;
          padding: 2px 5px;
          overflow: hidden;
          white-space: nowrap;
          text-align: center;
      } .tbl th {
          border-bottom: 1px solid #ccc;
          padding: 2px 5px;
          overflow: hidden;
          white-space: nowrap;
          background: #fff;
          display: table-cell !important;
      }
  
      td.correct_text_spacing {
          white-space: normal;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Table Layout (large overflowing):</strong></p>
  
  <pre><code>&lt;table class="tbl"&gt;
      &lt;tr&gt;
          &lt;th class="firstColumn"&gt;
              Cell 1:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 2:Long Heading Data
          &lt;/th&gt;
          &lt;th&gt;
              Cell 3:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 4:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 5:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 6:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 7:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 8:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 9:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 10:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 11:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 12:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 13:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 14:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 15:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 16:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 17:Heading
          &lt;/th&gt;
          &lt;th&gt;
              Cell 18:Heading
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Cell 1:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 2:Row 1:Overflowing Data - This has a lot of extra data that will be hidden and displayed correctly. 
              Please add more data to test the functionality of the cell data
          &lt;/td&gt;
          &lt;td&gt;
              Cell 3:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 4:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 5:Row 1: "Lorem ipsum dolor sit amet, 
              consectetur adipisicing elit, sed do eiusmod  
              tempor incididunt ut labore et dolore magna aliqua. 
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
              in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
              Excepteur sint occaecat cupidatat non proident, 
              sunt in culpa qui officia deserunt mollit anim id est laborum."
          &lt;/td&gt;
          &lt;td&gt;
              Cell 6:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 7:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 8:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 9:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 10:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 11:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 12:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 13:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 14:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 15:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 16:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 17:Row 1
          &lt;/td&gt;
          &lt;td&gt;
              Cell 18:Row 1
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Cell 1:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 2:Row 2:Overflowing Data
          &lt;/td&gt;
          &lt;td&gt;
              Cell 3:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 4:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 5:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 6:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 7:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 8:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 9:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 10:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 11:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 12:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 13:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 14:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 15:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 16:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 17:Row 2
          &lt;/td&gt;
          &lt;td&gt;
              Cell 18:Row 2: "Lorem ipsum dolor sit amet, 
              consectetur adipisicing elit, sed do eiusmod  
              tempor incididunt ut labore et dolore magna aliqua. 
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
              in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
              Excepteur sint occaecat cupidatat non proident, 
              sunt in culpa qui officia deserunt mollit anim id est laborum."
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>[Original Statement/Question] <br />
  <em>After many edit/revises on the code/question I kinda have it working, but only in the IE's (6 &amp; 7), it's not working correctly in Firefox (Augh!!). I think it's the animation calls being called at the same time and not concurrently, tried the callback option but can't get that to work either. any help would be great :)
  Another issue but I might live with it: when the animation is happening the white-space:normal from the CSS is also working causing the animation to make the screen really long (Height) and then correct itself as the column cell gets larger. Anyway to call the CSS after the animation and maybe even animate that?
  BTW: <a href="http://jsbin.com/ezesi" rel="nofollow noreferrer">here is a WORKING DEMO</a>
  What I'm trying to achieve here is to display a table on one page without a horizontal scroll bar or scrolling and allowing the table to display the selected data and hide the other columns for later display if clicked. 
  EXTREME EXAMPLE: if I have a table with 30 columns I would like it to display without the need for the user to scroll or move the page in any horizontal manner but click on the column data to display the selected.</em></p>
  
  <p><strong>Thanks for all the help and ideas to solve this issue :)</strong></p>