home

Jquery SlideDown-slideUp-slideToggle

Jquery slideDown-slideUp-slideToggle Jquery itself has three type of slide methods, and this methods slides to the matched elements based on given id or conditions in the previous chapter we have discussed about hide and show method. both are completely different, slide down method will scroll down from the current position, and slide up will scroll up from the down, and last one is slide toggle this will allow your element scroll top and scroll down.

This all completely reference of toggle methods, in the below following code about three methos(Jquery SlideDown-slideUp-slideToggle), also find the below Jquery SlideDown-slideUp-slideToggle methods demos.

Jquery Slide Down Method

Jquery Slide Down Method, will slide scroll down (down) to matched element on time preferences, below we have syntax structure for slide down. comming to the code section we have couple of divs one is for button (#down) and other one for container (#sliderd). when user respond to button the sliderd div will scroll down.

Syntax :$(selector).slideDown(speed,callback);
//html code
<div id="down">slideDown Button</div>
<div id="sliderd">Slider container text</div>

//css 
#sliderd, #down{
    padding: 5px;
    text-align: center;
    background-color: red;
    border: solid 3px #c3c3c3;
}

//jquery slideDown Method
 $("#down").click(function(){
     $("#slider").slideDown("slow");
  });

Jquery Slide Up Method

Jquery Slide Up Method, will slide scroll top (up)to matched element on time preferences, and we have syntax structure for slide up method. comming to the code section we have couple of divs one is for button (#up) and other one for container (#slideru). when user respond to button the sliderd div will scroll up.

Syntax :$(selector).slideUp(speed,callback);
//html code
<div id="up">slideUp Method</div>
<div id="slideru">Hello world!</div>

//css
#slideru, #up {
    padding: 5px;
    text-align: center;
    background-color: red;
    border: solid 3px #c3c3c3;
}

//jquery slideUp Method
$("#up").click(function(){
     $("#slideru").slideUp("slow");
  });

Jquery Slide Toggle Method

Jquery Slide Toggle Method, will slide scroll down and top (by defaultly it will hide)to matched (id match) element on time preferences, and we have syntax structure for slide toggle method. comming to the code section we have couple of divs one is for button (#stoggle) and other one for container (#slidertoggle). when user respond to button the sliderd div will scroll up and down.

Syntax :$(selector).slideToggle(speed,callback);
//html code
<div id="stoggle">slideToggle Method</div>
<div id="slidertoggle">Hello world!</div>

//css
#toggle, #slidertoggle {
    padding: 5px;
    text-align: center;
    background-color: red;
    border: solid 3px #c3c3c3;
}

#sliderd, #slidertoggle  {
    padding: 50px;
    display: none;
}

//jquery slideToggle Method
$("#stoggle").click(function(){
   $("#slidertoggle").slideToggle("slow");
});
slideDown Method
US tutorial is the website written by real time expertise with using simple and effective examples and free demos which easily understand by beginners.
slideUp Method
US tutorial is the website written by real time expertise with using simple and effective examples and free demos which easily understand by beginners.
slideToggle Method
US tutorial is the website written by real time expertise with using simple and effective examples and free demos which easily understand by beginners.