How to I hide and show HTML elements using JQuery without any special effects?
1
-
Thanks for all the answers all of them helpedElitmiar– Elitmiar2009-07-02 11:48:22 +00:00Commented Jul 2, 2009 at 11:48
Add a comment
|
6 Answers
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.
Comments
$('#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:
Comments
Toggling display:
$('selector').toggle();
Show:
$('selector').show();
Hide:
$('selector').hide();
Comments
$("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.
Comments
Hide element:
$('#myElement').hide();
Show element:
$('#myElement').show();
