jquery slidedown a hidden div

[Pain]

Hi there.

 

I want to make a sliding div which is hidden.

 

Lets say there is a document and a button within a document. A new div slides down as soon as the button is clicked. I've tried using css visibility: hidden and then jquery:

 

$(document).ready(function(){
$(".in_line2").click(function(){
$(".message_box").css("visibility", "visible");
$(".message_box").slideDown("slow");
});
});

 

however what happens is the box appears instantly and that's it, no sliding effect.

[ZulfadlyAshBurn]

jQuery slide down uses display not visibility. I have created an example for your use.

 

<style>
    .message_box {
      display:none;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

   $(".in_line2").click(function() {
      $(".message_box").slideDown("slow");   
   });
});

</script>

<span class="in_line2">Click Me</span>
<div class="message_box">And I'll slide down<>

 

It's been tested to work. So everything should be fine.