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

No Comments

This can be done by using the hide() and show() methods or the toggle() method. The toggle() method calls the show() method if the element is hidden and the hide()method if the element is showing.

$(“selector”).hide();
$(“selector”).show();

or

$(“selector”).toggle();

Example:

<script type=”text/javascript”>

$(function() {
$(“#mybutton”).click(function() {
$(“#div_id”).toggle();
});
});

</script>

<div id=”div_id“>
This is an Example.
</div>

<input type=”button” id=”mybutton” value=”Hide/Show Div“>

Basically everytime the button is clicked it hides the div tag. If the div tag is showing it hides it and shows the div tag if the div tag is hidden. The toggle()method could also be replaced with $(“#div_id”).hide(); and $(“#div_id”).show(); but then the function needs to be changed a bit in order to have it working as above.

Image Credits: Photo by Isis França on Unsplash.

Last Updated On March 21, 2018

Related Articles

No results found

Leave a Reply

avatar
  Subscribe  
Notify of
Menu
Copy link