Jquery Show, hide and toggle functions are used to hide show and toggle elements with transitions. For transitions, we can pass parameters "slow", "fast" or seconds. These functions can run of all browsers versions with transitions.

Jquery Hide function

JQuery hide() function is used to hide an html element with transition. After transitions ends, display:none will be applied.

Jquery Hide Example

jquery1 jquery1


<script>
$(document).ready(function(){
	$('button').click(function(){
    	$('img').hide();
    })
}) 
</script>	

Hide With Transition slow

jquery1 jquery1


<script>
$(document).ready(function(){
	$('button').click(function(){
    	$('img').hide("slow");
    })
}) 
</script>	

Hide With Transition fast

jquery1 jquery1


<script>
$(document).ready(function(){
	$('button').click(function(){
    	$('img').hide("fast");
    })
}) 
</script>	

Hide With custom Transition

jquery1 jquery1


<script>
$(document).ready(function(){
	$('button').click(function(){
    	$('img').hide(1000);
    })
}) 
</script>	

Jquery Show Function

JQuery show() function is used to show an hidden element (display:none) with transition.

Jquery Show Example

jquery1


<script>
    $(document).ready(function(){
        $('button').click(function(){
            $('img').show();
        })
    }) 
</script>	
					

Jquery Show with Transition

jquery1


<script>
    $(document).ready(function(){
        $('button').click(function(){
            $('img').show("slow");
        })
    }) 
</script>	
					

Jquery Toggle Function

Jquery Toggle function can do both hide and show alternatively. If element is show, toggle will hide, but if its hidden, it will show with transition.

Jquery Toggle Example

jquery1 jquery1


<script>
$(document).ready(function(){
    $('button').click(function(){
        $('img').toggle();
    })
}) 
</script>	
					

Jquery Toggle with Transition

jquery1 jquery1


<script>
$(document).ready(function(){
    $('button').click(function(){
        $('img').toggle(500);
    })
}) 
</script>