With jQuery, we can enable objects to be opened by expanding downwards or hidden by closing upwards.

There are 3 different variations of the Slide method, and the way they are used is the same as each other and with the methods we have covered in other subjects:

$(selector).slideMethod( speed, callbackFunction );

Parameters are optional. To determine the effect speed, a time can be given as slow, fast or in milliseconds. Callback functions were explained in our previous topic.

Let's examine the slide methods:

slideDown()

Method It allows a hidden object to be opened by expanding downwards.

Example: In the example below, the slideDown method is used in 3 different ways.

$("#button1").click(function(){
 $("#box1").slideDown();
 $("#box2").slideDown("slow");
 $("#box3").slideDown(3000);
});

slideUp() Method

It allows objects to be hidden by closing upwards.

Example:

$("#button1").click(function(){
 $("#box1").slideUp();
 $("#box2").slideUp("slow");
 $("#box3").slideUp(3000);
});

slideToggle() Method

It enables it to close if the object it is connected to is visible, and to open it if it is hidden.

Example:

$("#button1").click(function(){
 $("#box1").slideToggle();
 $("#box2").slideToggle("slow");
 $("#box3").slideToggle(3000);
});