How to I hide and show HTML elements using JQuery?

Question

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

Answer 1

Using the hide() and show() methods:

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

Where "selector" is whatever is appropriate. Like:

<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 toggle() method just calls show() if hidden or hide() if its 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

See:

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

and

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

Also, would be a good idea to read up on Selectors:

http://docs.jquery.com/Selectors

Answer 3

Hide element:

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

Show element:

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

Answer 4

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

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

Answer 5

Toggling display:

$('selector').toggle();

Show:

$('selector').show();

Hide:

$('selector').hide();

Answer 6

$("selector").toggle() switches the selected DOM element(s) between hidden and shown. $("selector").hide() hides the selected DOM element(s). $("selector").show() shows the selected DOM element(s).

Truthfully though, I think you could've solved this problem without having to consult stackoverflow. The jquery docs are pretty clear imo!

see the jQuery online documentation for show, hide and toggle.