How to make div slidedown

Question

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

JQuery is confusing to me and really just need help

Unpleasant

Check out the link. api.jquery.com/slideDown – Horripilate

Answer 1

Try this:

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 Optional CSS:

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

Try this, and it will work :)

Bogeyman

you have to initialize the DOM for the javascript to work by calling $(document).ready(function () { // code here // }); – Brandybrandyn

Answer 2

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 a jsfiddle of the above code: http://jsfiddle.net/EfmeW/

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

Percussion

Answer 3

Use the following JQuery. You'll need to have a div with class myDivClass as JQuery uses CSS-selectors to find elements. The document.ready part is to ensure your page is fully downloaded / parsed before the Javascript is executed (this is a crucial step).

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

Here is a JSFiddle as an example to have a div slide down on a button press.

P.S. If you are using Firebug or Chrome right, you can try this out right now on this page!

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

Eloiseloisa

Answer 4

To slide 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>

Check out an example here: http://jsfiddle.net/WvVf3/1/

Hope this helps.

Edwardoedwards

Answer 5

When you say slide down, do you mean:

• make the div appear by sliding down: $('#me').slideDown();

or

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

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

Rubella