JQuery examples - Horizontal accordion - Table instead of Un-ordered lists - UPDATED

Question

Ok, I got it for everyone who needs it :)

[Original expression / question]
Here is an example of what I'm trying to do (but don’t click on a click): 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 crowded):

 <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 expression / question]
After many changes / revisions of the code / question, I have work, but only in IE (6 and 7), it does not work correctly in Firefox (Augh !!). I think the animation calls being called at the same time, but not at the same time, have tried the callback option, but cannot make it work. any help would be great :) Another problem, but I can live with it: when the animation happens in white space: normal work with CSS also works, forcing the animation to make the screen very long (height), and then correct itself as the column cell grows . In any case, to invoke CSS after the animation, and perhaps even animate it? BTW: here is a WORKING DEMO What I am trying to achieve here is to display the table on one page without a horizontal scroll or scroll bar and allow 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 be displayed without having to scroll or move the page in any horizontal way, but click on the column data to display the selected ones.

Thanks for the help and ideas for solving this problem :)

Answer 1

Well, I will completely redo this because I looked more at your problem and saw that the white space problem was a problem.

As I said, use white-space: pre-wrap to avoid distortion. There is also an IE equivalent.

First, here is an example that demonstrates redefining td elements and removing style for others. It is hardcoded, but it can be manipulated according to 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, there are some things to note. I use the nth-child selector to get the td elements that match th, by looping over each th and applying a function that consumes the environment (to avoid references). This can obviously be done in several ways.

You can apply this CSS using the “full” animation callback and do it this way.

I purposefully qualified selectors so you can see how they should work. You can add identifiers / classes to any necessary tool.

Let me know if this works for you.

Answer 2

This is probably a stupid idea, but if you are stuck in html (that is, you cannot edit it), but you have the opportunity to apply any javascript on the page - why not just read the data that the table contains in memory (which converts it to some data structure js), and then just delete the original table with javascript, and then using it, create any html that suits your needs.

This will probably be easier than hacking a table.