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

Written by Ian Carnaghan · 31 sec read >

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.





<script type=”text/javascript”>

$(function() {
$(“#mybutton”).click(function() {


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

<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.

Last Updated On March 21, 2018
Written by Ian Carnaghan
I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment. Profile

Leave a Reply

Notify of