div will slideDown but it won't slideUp

Question

Hello All, I am attempting to show and hide a series of divs using toggle, slideUp and slideDown. I am able to get the div to slideDown but I can't get it to slideUp. I've used this script without incident before so I'm really confused as to why this isn't working. I have included my script and the div I'm attempting to show and hide.

Quick Note: When I put a regular old p tag in the "hidden vehicles" div, it worked fine. It was showing and hiding like it was supposed to. However, when I put my table back into that div, it didn't work.

<script type="text/javascript">
$(document).ready(function() {
    $(".ShowVehicles").toggle(function() {
        $(".HiddenVehicles").slideDown(2000);
        $(this).text("Hide All");
    }, function () {
        $(".HiddenVehicles").slideUp(2000);
        $(this).text("Show All");                
    });
});

<div class="HiddenVehicles" style="display:none; width:730px;">
    (there will be a giant table in here)
    </div>

Answer 1

For additional clarification of other folks who come across this, it sounds like a browser issue. Is the browser you're testing with Internet Explorer 6 or 7?

Answer 2

I posted this advice as a comment, and it helped to fix the problem so I am posting it again here:

When slideUp/slideDown animations only work one way, it is often a positioning bug. Either the element you are animating needs to be set to position:relative or the children of the element have a float applied to them and are not giving the parent element true height.

I would try adding float:none to the table. If that doesn't work try adding position:relative to the div#HiddenVehicles.