Question

I have a table with content and a image that when clicked shows hidden content contained within a div. This div has another table within to format the content. Now when i test this in IE and chrome the hidden content slides up and down depending on the button clicked. But when i do this in firefox the content just appears and disappears no smooth sliding. Can anyone tell me why. If i move the show button out of the top table and insert it between the two tables the sliding up and down works smoothly. The only problem with this is that i need the show button to be within the content

my script looks like this

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

      $(".slidingDiv").hide()
      $('.show').click(function() {
        $(".slidingDiv").slideDown(1000);
        return false;
      });

      $('.hide').click(function() {
        $(".slidingDiv").slideUp(1000);
        return false;
      });
    });
  });
//]]>
</script>

which appears in the head of the page

then my code for the body of the page looks like

<table style="width: 100%;" align="left" border="0">
  <tbody>
    <tr>
      <td>content here</td>
      <td>and here</td>
      <td><a class="show"><img src="images/more.jpg" onmouseout="this.src='images/more.jpg';" onmouseover="this.src='images/more_over.jpg';" /></a></td>
    </tr>
  </tbody>
</table>

<div class="slidingDiv">
  <table style="width: 100%;" align="left" border="0">
    <tbody>
      <tr>
        <td>content hidden</td>
        <td>content hidden</td>
        <td>content hidden</td>
      </tr>
      <tr>
        <td>content hidden</td>
        <td>content hidden</td>
      </tr>
      <tr>
        <td>content hidden</td>
        <td>content hidden</td>
      </tr>
    </tbody>
  </table>
  <a class="hide"><img src="images/close.jpg" onmouseout="this.src='images/close.jpg';" onmouseover="this.src='images/close_over.jpg';" /></a>
</div>

Answer 1

Check this JSFiddle: http://jsfiddle.net/s3Fpt/3/ (1)

This works in Firefox

It seems that align="left" border="0" in both your div and table negatively influence the animation. That’s not a problem, because you should only define your document with HTML, not style it. Furthermore, align is a deprecated attribute and should be avoided anyway.

Styling the alignment and the border can be done with css:

td, div.slidingDiv
{
  border: 0;
  text-align: left;  // Though not really necessary because this is default
}

(1) edit: removed the extra function wrapping, as noticed by ScottE