jQuery Examples – Horizontal Accordion - Table instead of Un-ordered Lists - UPDATED

Question

Ok I got it working for anyone who needs this :)

[Original Statement/Question]
Here is and example of what I'm trying to do (But on click not hover): The Example

JavaScript:

<script type="text/javascript">
    $(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 ( <th> )
        $("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
                    });
                });
            }
        });
    });
</script>

CSS:

<style type="text/css">
    .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;
    }
</style>

Table Layout (large overflowing):

<table class="tbl">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th>
            Cell 2:Long Heading Data
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
        <th>
            Cell 6:Heading
        </th>
        <th>
            Cell 7:Heading
        </th>
        <th>
            Cell 8:Heading
        </th>
        <th>
            Cell 9:Heading
        </th>
        <th>
            Cell 10:Heading
        </th>
        <th>
            Cell 11:Heading
        </th>
        <th>
            Cell 12:Heading
        </th>
        <th>
            Cell 13:Heading
        </th>
        <th>
            Cell 14:Heading
        </th>
        <th>
            Cell 15:Heading
        </th>
        <th>
            Cell 16:Heading
        </th>
        <th>
            Cell 17:Heading
        </th>
        <th>
            Cell 18:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td>
            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
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            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."
        </td>
        <td>
            Cell 6:Row 1
        </td>
        <td>
            Cell 7:Row 1
        </td>
        <td>
            Cell 8:Row 1
        </td>
        <td>
            Cell 9:Row 1
        </td>
        <td>
            Cell 10:Row 1
        </td>
        <td>
            Cell 11:Row 1
        </td>
        <td>
            Cell 12:Row 1
        </td>
        <td>
            Cell 13:Row 1
        </td>
        <td>
            Cell 14:Row 1
        </td>
        <td>
            Cell 15:Row 1
        </td>
        <td>
            Cell 16:Row 1
        </td>
        <td>
            Cell 17:Row 1
        </td>
        <td>
            Cell 18:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td>
            Cell 2:Row 2:Overflowing Data
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
        <td>
            Cell 6:Row 2
        </td>
        <td>
            Cell 7:Row 2
        </td>
        <td>
            Cell 8:Row 2
        </td>
        <td>
            Cell 9:Row 2
        </td>
        <td>
            Cell 10:Row 2
        </td>
        <td>
            Cell 11:Row 2
        </td>
        <td>
            Cell 12:Row 2
        </td>
        <td>
            Cell 13:Row 2
        </td>
        <td>
            Cell 14:Row 2
        </td>
        <td>
            Cell 15:Row 2
        </td>
        <td>
            Cell 16:Row 2
        </td>
        <td>
            Cell 17:Row 2
        </td>
        <td>
            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."
        </td>
    </tr>
</table>

[Original Statement/Question]
After many edit/revises on the code/question I kinda have it working, but only in the IE's (6 & 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: here is a WORKING DEMO 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.

Thanks for all the help and ideas to solve this issue :)

Answer 1

Okay, I am completely re-editing this, because I looked more into your problem and saw that the white-space was an issue.

Like I said before, use white-space: pre-wrap not pre to avoid distortion. There is an IE equivalent as well.

First, here is an example demonstrating re-sizing the td elements and removing the style for others. It is hard-coded, but can be manipulated to fit your needs.

http://ece.arizona.edu/~justinvh/test.html

Here is the html:

<!DOCTYPE HTML>
<html>
  <head>    
    <title>Testing Horizontal Accordion</title>
    <style>
      table {
        width: 100%;
      }

      th {
        display: table-cell !important;
      }

      td {
        border: 1px solid #A8A8A8;
      }

      div.content {
        max-height: 20px;
        overflow: hidden;
        white-space: pre-wrap;
      }
    </style>
    <script src="jquery-1.3.2.min.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th style="width: 70%;">A</th>
          <th>B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
          <td>       
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
          <td>Hello, my baby!</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Here is the JavaScript:

<script>
  var $active = $("thead > tr > th:first");
  var $active_td = $('div.content', 'table > tbody > tr > td:nth-child(1)');
  var min_width = $active.next().width();
  var max_width = $active.width();

  $("thead > tr > th").each(function(i, e) {
    (function(ith, element) {
      $(element).click(function() {
        $active_td.css('max-height', '20px');
        $active.animate({ width: min_width }, { queue: false, duration: 400 });
        $active_td = $('div.content', 'table > tbody > tr > td:nth-child(' + (ith + 1) + ')');
        $active_td.css('max-height', 'inherit');         
        $(this).animate({ width: max_width }, { queue: false, duration: 400 });
        $active = $(this);
      });
    })(i, e);
  });

  $('thead > tr > th:first').click();
</script>

So, some things to note. I use the nth-child selector to get the elements of the td that correspond to the th by looping over each th and applying a function that consumes the environment (to avoid references). This can obviously be done in multiple ways.

You can apply this CSS using 'complete' callback on animate and do it that way.

I purposely fully qualified the selectors so you can see how they should work. You can add identifiers/classes to whatever means is necessary.

Let me know if this works for you.

Answer 2

This probably is a silly idea - but if you're stuck with the html (that is you can't edit it), but you do have the ability to apply any javascript on the page - why not simply reading the data that the table contains to memory (that is convert it to some js data structure), then just remove the original table using javascript and then using it create any html that suits your needs.

That probably will be simpler than table hacking.