Show HTML elements with jQuery

To show HTML elements, we use the show () and hide () methods in jQuery. Refer to the following jQuery lesson of Taimienphi.vn to learn in detail about these methods.

Show HTML elements with jQuery

1. Hide HTML elements using show () and hide () methods in jQuery

As mentioned above, to hide and show HTML elements, we use methods show () and hide () in jQuery.

Method hide () establish display: none for the selected element. On the contrary, modal show () restore display properties of the original set of elements that are blocks (inline), inline (inline) or inline blocks (before) display: none is applied.

For example: The following example illustrates how to use the show () and hide () methods in jQuery to hide and show HTML elements:

The output will look like the following:

In addition, we can specify time parameters to hide animation effects in jQuery in a specific time period.

The length of time can be specified by using one of the predefined “slow” or “fast” strings or in milliseconds for greater accuracy, the higher the value, the slower the animation will appear. .

For example: The following example illustrates the use of slow and fast strings to specify the time of animation display:

The output will look like the following:

Note: Chain “fast“equals to a time interval of 200 milliseconds, the string”slow“equals an interval of 600 milliseconds.

We can also specify a callback function to be executed after the show () or hide () method is complete, such as in the following example:

The output will look like the following:

2. Show HTML elements using the toggle () method in jQuery

Method toggle () in jQuery show or hide elements in such a way that if the element was initially displayed, that element would be hidden, or if the element was initially hidden, that element would be displayed.

For example: In the example below we will use the toggle () method in jQuery to show or hide elements:

The output will look like the following:

Similarly, we can also specify the duration parameter for the toggle () method to display the animation, like the show () and hide () methods, such as in the example below:

The output will look like the following:

We can also specify the callback function for the toggle () method.

For example: The following example illustrates how to specify the callback function for the toggle () method:

The output will look like the following:

So the above lesson Taimienphi.vn has just introduced you how to hide HTML elements with jQuery. Also readers can refer to some other lessons already on Taimienphi.vn to learn more about how Create web page with jQuery.

https://thuthuat.taimienphi.vn/an-hien-cac-phan-tu-html-bang-jquery-51487n.aspx
In the next lesson, Taimienphi.vn will introduce you to the effects Fade in and Fade out in jQuery.