How to toggle between hiding and showing an element using Javascript?
JQuery hide() and show() Methods
With jQuery, you can hide and show HTML elements with the hide() and show() methods:
|
1 2 3 |
$element.hide(speed,callback); $element.show(speed,callback); |
The optional speed parameter can take the following values: “slow”, “fast”, or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
Note: show() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).
JQuery toggle() Method
You can also toggle between hiding and showing an element with the toggle() method.
|
1 |
$element.toggle(); |
Hide or Show an Element on Click
Want to trigger hide/show on a click event?
|
1 2 3 |
$element.click(function(){ $element.toggle(); }); |
JQuery css() Method
Below is another example, show or hide an element depending on its current state. Instead of using toggle() method, we can also use css method and update the display attribute based on if the element is currently showing or hidden.
|
1 2 3 |
$element.css('display', function(i, display) { return (display === 'block') ? 'none' : 'block'; }); |
Pure JavaScript Implementation
|
1 2 3 4 5 6 |
var element = document.getElementById("elementId"); if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } |