div will slideDown but it won't slideUp

Question

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>

Stacystadholder

I just tested your code locally and it worked fine. Most likely your table is floated. You could try adding position:relative to your div and to the table. Any possibility you could link to a live test page somewhere? It would be easier to debug. – Trimolecular

Correction, Those were two unrelated suggestions. If your table isn't floated, try the position: relative. If it is, turn it off with float:none on the table css. – Trimolecular

Thank you so much! This worked perfectly. My table was most likely inheriting a float class from somewhere! Thanks again! – Stacystadholder

@dcneiner - You might want to go ahead and make an offical answer so that both of you can gain some reputation points from this. – Richrichara

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? – Cosmo

Thanks @Chris, on your advice I did just that. @Stacystadholder I am glad it worked for you! I put the advice into an answer if you want to mark it as solved. – Trimolecular

Answer 1

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.

Trimolecular

Answer 2

For those without float/positioning problems, I found that upgrading from jQuery 1.10 to 1.11 solved the problem.

Guppy