Question

I’m trying to make a collapsible panel. The code below is the closest I got with my table, but when I collapse it in and out again, the <td>‘s show stacked (only happens in Firefox) and in Chrome the data <td>‘s aren’t the right width after collapsed.

Also is it possible to make an image repeatedly switch? Like an green dot in the name table when collapsed and a red dot when closed?

Here is the code:

<?php
include "config/tabelwidth.php";
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");
      $("td.subs", $(this).parent()).slideToggle("fast");
   });
});

</script>                                                               


<table border="1px" width="<?php echo $width."px"?>">
    <tr class="header">
        <td width="<?php echo $width1."px"?>">naam</td>
        <td width="<?php echo $width2."px"?>" class="subs">subs</td>
        <td width="<?php echo $width3."px"?>" class="subs">subs</td>
        <td width="<?php echo $width4."px"?>" class="subs">subs</td>
    </tr>
    <tr class="child">
        <td width="<?php echo $width1."px"?>">data1</td>
        <td width="<?php echo $width2."px"?>">data2</td>
        <td width="<?php echo $width3."px"?>">data3</td>
        <td width="<?php echo $width4."px"?>">data4</td>
    </tr>
</table>

EDIT:

ok so updating my jQuery worked!:)

I really love to see those helpful people here, seems jQuery is a really nice thing to learn ^^

If I may ask where did you guys learn jQuery?

Finally last part of my question..

let’s say I want an image of an arrow pointing down (name: arrowdown) when collapsed, if hided the arrow is pointing right (name: arrowright) how’d you guys fix that one? ;o 🙂

Answer 1

Tested in Firefox 16 and Google Chrome 22 Works fine (got rid of px if that makes any difference) – Fiddle
I got rid of px if that makes any difference.

<table border="1px" width="400px">
    <tr class="header">
        <td width="100">naam</td>
        <td width="100" class="subs">subs</td>
        <td width="100" class="subs">subs</td>
        <td width="100" class="subs">subs</td>
    </tr>
    <tr class="child">
        <td width="100">data1</td>
        <td width="100">data2</td>
        <td width="100">data3</td>
        <td width="100">data4</td>    
    </tr>
</table>​

Ideal solution would be to create a CSS sprite and toggle its background position

Edit

Upgrade your jQuery, I see you are using jQuery 1.3.2 and loks like there is a bug which sets <tr> display property to block instead of table-row