Can't show/hide table rows like the divs for some reason

Question

Hi guys, I've used animatedcollapse for my div sliders with no flaws. However, I now need to use a table row slider and it isn't performing the same at all. Here is a portion of the table I am using so you get an idea.

<table>

Reply to post...

   </div>
    <script type="text/javascript">

            $(document).ready(function () {
                var editor = CKEDITOR.replace( 'newsfeed_status7',
                           {
                                   toolbar :
                                   [
                                          ['Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'Undo', 'Redo', '-', 'MediaEmbed','Smiley', 'SpellChecker', 'Find','Replace']
                                   ],
                                   height: '50px'
                           });

            });

    </script>
        <table width="100%">
            <tr>
                <td align="left" width="25%" style="padding-left:15px;"></td>
                <td align="left" width="25%"></td>
                <td align="right"></td>

                <td align="right" width="20%" style="padding-right:15px;"><input type="submit" value="Reply To Post" class="submitbtn" /></td>
            </tr>
        </table>
    </td>
</tr>                        

Reply 07/11/10 03:12:20 PM

Here is what is placed at the footer file:

<script type="text/javascript">
animatedcollapse.addDiv('tr7', 'fade=1') animatedcollapse.addDiv('tr6', 'fade=1') animatedcollapse.addDiv('tr4', 'fade=1') animatedcollapse.addDiv('tr2', 'fade=1') animatedcollapse.addDiv('tr1', 'fade=1') animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()
</script>

Answer 1

You may not like the solution, as it get's a little ugly (assuming you are absolutely tied to a Table based layout).

You'll need to nest another table inside the first table cell. Like so:

table
    tr
      td class="show-hide"
        table
            tr
                td
                td
                td

etc...

From there you can assign your fav show-hide animation to the table cell I marked "show-hide".

Or the more simple application of this would be to output the rows as divs (instead of tr's) then a table inside to achieve your structure.

The animation looks nice on either of these versions of the solution, the con being that you need to assign defined widths for each td so that you can maintain the lattice structure you need.

Hope this helps.

To be fully xhtml compliant, I'd use "dl" instead of "table".

Answer 2

Assuming that animatedcollapse is an animation that works by setting overflow: hidden on an element and then changing its height, I'm afraid overflow simply doesn't work on table-rows due to their different/unusual layout model (in most browsers and under most circumstances, anyway).

To make it work, you'll have to break out that row into its own table. Then, for widest compatibility, you can put the table that has to hide inside a <div>, and do the overflow/animation on the div.

Since you now have multiple tables (three, if there were previously rows before and after the target row), you need to make sure their columns line up, to make them look like a single table. This should be done by giving the tables the style table-layout: fixed; width: 100%; (and then sizing any columns that need a different width from the others with a width style on the cells in the first row, or a set of <col> elements).

table-layout: fixed is in any case generally to be preferred as it is faster and more predictable cross-browser than the default ‘auto’ table-layout algorithm.