Jquery show hide function | jquery toggle function

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


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

Hide With Transition slow


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

Hide With Transition fast


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

Hide With custom Transition


<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


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

Jquery Show with Transition


<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


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

Jquery Toggle with Transition


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