How to make a slidedown div

Question

Sorry I'm really new to JQUery and would like to know how to make Div Slide Down?

JQuery is confusing me and really needs help

Answer 1

HTML

  <a id="click_to_slide"> Click To Slide Down </a>
 <div id = "slide_me_down"> </div>

CSS

  #slide_me_down {
     display: none;
     width: 100px;
     height: 100px;
     background-color: # 000;
 }

JAVASCRIPT

  $ (document) .ready (function () {
     $ ('# click_to_slide'). live ('click', function () {
         $ ('# slide_me_down'). slideDown ();
     });
 });

Here is the jsfiddle of the above code: http://jsfiddle.net/EfmeW/

Also, if you want to have a slideUp and Down div depending on whether the div is already or not, you can use .slideToggle () instead of .slideDown ()

Answer 2

Try the following:

HTML:

<button id="click_to_slide"></button> <div id="me_down" style="display:none;">I'm Sliding down</div> 

JavaScript:

 $('#click_to_slide').click(function () { $('#me_down').slideDown(); }); 

And additional CSS:

 #me_down { color:white; width: 100px; height: 100px; background-color: #000; } 

Try this and it will work :)

Answer 3

Use the following jQuery . You will need to have a div with the myDivClass class, since jQuery uses CSS selectors to search for elements. Part of document.ready is to make sure your page is fully loaded / parsed before Javascript is executed (this is an important step).

  $(document).ready(function() { $('.myDivClass').slideDown(); }); 

Here is an JSFiddle as an example to slide the slide down on the button.

PS If you use Firebug or Chrome correctly, you can try it right now on this page!

  $('#hlogo').hide().slideDown('slow'); 

Answer 4

To move an element down, just use this:

 <script type="text/javascript"> $(document).ready(function() { $('#test').slideDown(); }); </script> <div id="test" style="background-color:lightgrey;border:2px solid grey;padding:10px;">Hello, this will slide down.</div> 

See an example here: http://jsfiddle.net/WvVf3/1/

Hope this helps.

Answer 5

When you say a slide down, you mean:

• print the div sliding down: $('#me').slideDown();

or

• move the div down: $('#me').css('position','relative').animate({top:'+200'},'slow');

http://jsfiddle.net/rkw79/AnTDk/5/