jQuery Web Page Design Tutorials

jQuery Slide Div Up and Dowm from Bottom Side

This jQuery tutorial shows how to slide a Div Layer up and down from the bottom 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.

This is the HTML codes of the Picture Div Layer.

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

And this is the style of the Picture Div Layer:

#picture {
height: 298px;
width: 282px;
background-image: url(arrow_down.png);
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #036;
background-repeat: no-repeat;
display: none;
}

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 down up

The picture div layer is simply sliding up by using the jQuery slideToggle() Method.

The .slideToggle() method actually animates the height of selected element. This causes lower parts of the selected element to slide up or down, making an illusion to dispaly or hidden of the selected element. Note that:

  • If the selected element is displayed, it will be hidden,
  • If the selected element is hidden, it will be displayed then.

In our demo, the selected element (picture div layer) is hidden at the beginning so that the first slideToggle will display the arrow image. After the arrow image is displayed, the next slideToggle will hide the image.

The following is an example using the jQuery slideToggle method. It simply slide the picture div layer up and down in 3000 milliseconds (i.e. 3 seconds). Same as other animation method, a callback function can be used.

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

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