Hide show HTML element by javascript

Hide show any element on a HTML page is vary common thing for websites. For Hide and Show elements Jquery is the most common and reliable framework. But There is some performance issue by jquery, so Javascript is the best solution for Hide and show any element on a web page.

Sometimes JQuery isn’t necessary; if this is the only thing you need to do on a page, the overhead of loading the library far outweighs the need to write concise JavaScript.

It seems that hide() , show() and jquery visibility methods in general are not a good option in terms of performance.

Hide an element by id  in Javascript:

document.getElementById("id").style.display = "none";

Hide an element  by id  in jquery:

$("#id").hide();

Hide an element by class in javascript :

document.getElementsByClassName("class")[0].style.display = "none";

Hide  elements by class in jquery

$(".class").hide();

Show an element by id  in Javascript:

document.getElementById("id").style.display = "inline";

Show an element by id  in Jquery:

$("#id").show();

Show an element by class in Javascript:

document.getElementsByClassName("class")[0].style.display = "inline";

[/code</pre>

Show an element by class in jquery:
<pre>

$(".class").show();

Hide / Show all classes on a page in javascript.

Share