jQuery Web Page Design Tutorials

jQuery Slide Div Up and Dowm from Top Side (1)

In previous jQuery tutorial, the Div Layer was sliding down and up from the bottom side. This jQuery tutorial is quite similar. The difference is that the Div Layer is up and down from the top side.

jQuery Demo

A demo of this jQuery tutorial is available. Click here to View Demo. (Pop up window)

jQuery Tutorial Goal

jQuery slide

This jQuery tutorial shows how to slide the Picture Div Layer up and down from the top.

This is the HTML codes of the Picture Div Layer.

<div id="bg">
<div id="picture"></div>
</div>

This is the style of the bg Div Layer:

#bg {
height: 298px;
width: 282px;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #036;
position: relative;
}

And this is the style of the Picture Div Layer:

#picture {
height: 298px;
width: 282px;
background-image: url(arrow_down.png);
background-repeat: no-repeat;
text-align: center;
bottom: 0px;
position: absolute;
}

Tip:
The display property of Picture Div is set to none so that the "arrow_down.png" image is not show up when the page load up. If the display property is removed, the "arrow_down.png" will be display at the beginning.

jQuery slideToggle Method

jQuery slide up down

Same as previous sliding Div Layer tutorial, the picture div layer is also sliding down and up up by using the jQuery slideToggle() Method.

The following is the same example using the jQuery slideToggle method in previous tutorial. Interesting enough, if the picture div layer is an absolute div layer, it will sliding down and up from the top side.

$("#picture").slideToggle(3000)

This is the end of jQuery Slide Down and Up from Top Side Tutorial.