jQuery slideUp/Down not sliding

I’m trying to use slideUp and slideDown, they seem to be working in terms of being Up and Down but there is no sliding between these states, any ideas?


#sub-nav{width:240px; min-height:240px; padding:0; background:url(../images/80-opacity-bg-fill-purple.png) repeat; overflow:hidden; position:relative; z-index:4; display: none;}

.sub-nav{margin:0; padding:20px 0;}
.sub-nav > li{border-bottom:1px dotted #fff; width:200px; margin:0 0 0 20px; list-style:none; font-family:Tahoma, Geneva, sans-serif; font-size:13px;}
.sub-nav > li > a{display:block; padding:4px 10px; text-decoration:none; color:#fff;}
.sub-nav > li > a:hover{color:#462237; background:url(../images/80-opacity-bg-fill.png) repeat;}
#toggle{display:block; background:#000; color:#fff; max-width:60px; height:30px; line-height:26px; text-decoration:none; text-align:center; outline:none;}
#toggle a{text-decoration:none; color:#fff; font-size:15px;}


 <div id="sub-content">

      <div id="sub-nav">
      <div class="clear">
      <ul class="sub-nav">

      <li class="selected"
      <a href="call-us/">Call Us</a>


      </ul><!-- /.sub-nav -->
      </div><!-- /.clear -->
      </div><!-- /#nav-sub -->
      <div id="toggle">
      <a id="open" class="open" href="#">&darr; Menu</a>
      <a id="close" style="display: none;" class="close" href="#">&uarr; Menu</a> 

      </div><!-- /#sub-content -->

and my JS/JQ

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

          $("#toggle a").click(function () {
              $("#toggle a").toggle();


Thanks for looking, hope you can help.

The issue lies with min-height in your #sub-nav id, for the animation to work correct the element you want to up/slide down cannot contain a set height since jQuery determines the height by using a method such as .outerHeight().

Ahh, I thought this was the issue, I had removed it and inserted a height I guess I needed to clear a cache or something.

Is there anyway I can set a ‘min-height’ or somehow determin the current height once it is rendered with JQ as that area will need to sometimes grow larger than that and setting a height would stop this.



Actually Disregard that I’ll just not have the min-height it was purly for design purposes but it still looks ok with a smaller height (without a height set, it works also).

If you’d like to still submit some kind of solution that would be really appreciated.

Thanks again.


Ok no need for js/jq I just inserted another div with a min height which gives the div I want to affect a height for the jq to use