Show HTML elements with jQuery


The lesson below Taimienphi.vn will guide you how to hide HTML elements with jQuery, in addition readers can refer to some other lessons already on Taimienphi.vn to learn more about Events (events) in 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:

show the jquery html text components

The output will look like the following:

Show the jquery html text version 2

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:

show the jquery html html text 3

The output will look like the following:

Show jquery html text components 4

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:

Show jquery html text version 5

The output will look like the following:

Show the jquery html text version 6

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:

Show the jquery html text version 7

The output will look like the following:

Show the jquery html text version 8

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:

show jquery 9 html html code

The output will look like the following:

show the jquery html html text 10

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:

show the jquery html html text 11

The output will look like the following:

show the jquery html html text 12

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.

.

Add a Comment

Your email address will not be published. Required fields are marked *