How to hide and show HTML elements using jQuery?

Question

How to hide and show HTML elements using jQuery without any special effects?

Answer 1

Using hide()and show()methods:

$("selector").hide();
$("selector").show();

If the “selector” is all that fits. How:

<script type="text/javascript">
$(function() {
  $("#mybutton").click(function() {
    $("#mydiv").toggle();
  });
});
</script>
<div id="mydiv">
This is some text
</div>
<input type="button" id="mybutton" value="Toggle Div">

The method toggle()simply calls show()if it is hidden or hide()if it is not.

Answer 2

$('#someElement').show(); //an element with id of someElement

$('.someElement').hide();  //hide elements with class of someElement

$('a').hide(); //hide all anchor elements on the page

Cm:

http://docs.jquery.com/Effects/show

and

http://docs.jquery.com/Effects/hide

Also, it would be nice to read Selectors:

http://docs.jquery.com/Selectors

Answer 3

:

$('selector').toggle();

:

$('selector').show();

$('selector').hide();

Answer 4

$( "selector" ). toggle() DOM . $ ( "selector" ). hide() DOM. $ ( "" ). show() DOM.

True, I think you could solve this problem without accessing stackoverflow. The jquery docs are pretty clear!

see the jQuery online documentation for showing, hiding, and switching.

Answer 5

Hide item:

$('#myElement').hide();

Show item:

$('#myElement').show();

Answer 6

Hide: http://docs.jquery.com/Hide

Show: http://docs.jquery.com/Show