Hiding and Showing Objects with JQuery

Using jQuery, operations such as hiding objects and showing hidden objects can be done very easily. Three of the methods that can be used for this are explained on this page, and different methods are also explained in the following topics.

The most basic method used to hide objects is the hide method. The show method is used to show hidden objects. The Toggle method is like a combination of these two methods; it shows the object if it is hidden, and hides it otherwise. Let's examine these methods one by one.

Hiding Objects with the hide() Method The hide method, which hides objects, can be used without parameters, or the effect duration and callback function can optionally be specified.

$("#button1").click(function(){
 $("#box1").hide();
});

In the above example, when button1 object is clicked, box1 is hidden. Since no parameters are used, the hiding will occur as soon as it is clicked, not slowly.

In the example below, the hiding process is ensured to occur within 1000 ms, that is, 1 second. With this method, we can slowly hide objects.

$("#button1").click(function(){
 $("#box1").hide(1000);
});

The duration of the effect can be specified in milliseconds, or slow or fast values ​​can be used.

The use of the callback method will be explained in the next topic.

$("#button1").click(function(){
 $("#box1").hide("slow");
});

Making Hidden Objects Visible with the show() Method

The use of the show method is the same as the hide method, its job is to show the hidden object.

$("#button1").click(function(){
 $("#box1").show();
});

In the example above, when the button1 object is clicked, box1 is made visible. Since no parameters are used, it will appear as soon as it is clicked, not slowly.

In the example below, the object is made to appear slowly.

$("#button1").click(function(){
 $("#box1").show(1000);
});

Using the toggle() Method

The toggle method ensures that both hide and show methods can be executed by the same trigger. For example, if we want to show the object if it is hidden or hide it if it is visible when a button is clicked, the toggle method is the best solution. Its usage is the same as the hide and show method.

$("#button1").click(function(){
 $("#box1").toggle();
});

Since no parameters are used in the example above, it will appear or hide as soon as it is clicked, not slowly.

In the example below, the object is made to appear and hide slowly.

$("#button1").click(function(){
 $("#box1").toggle(1000);
});