Question

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”.