CODEWITHSUNDEEP
jquery
Elitmiar
Elitmiar

Reputation: 36899

How to I hide and show HTML elements using JQuery?

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

Upvotes: 6

Views: 14618

Answers (6)

karim79
karim79

Reputation: 342795

$('#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

Upvotes: 7

Erik van Brakel
Erik van Brakel

Reputation: 23840

$("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.

Upvotes: 2

Aron Rotteveel
Aron Rotteveel

Reputation: 83223

Toggling display:

$('selector').toggle();

Show:

$('selector').show();

Hide:

$('selector').hide();

Upvotes: 3

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45731

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

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

Upvotes: 1

James
James

Reputation: 82136

Hide element:

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

Show element:

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

Upvotes: 1

cletus
cletus

Reputation: 625467

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.

Upvotes: 15

Related Questions