jQuery .toggle() Examples

Welcome To jQuery !!
+_+
Example 1
View
jQuery toggle
Source
<style type="text/css">
    .css_test {
        border-radius:5px;
        border:5px solid gray;
        box-shadow:0 0 5px silver;
        padding:20px;
    }
</style>

<button type="button" onclick="$('.css_test').toggle()">Click !! Click !!</button>

<div class="css_test">
    jQuery toggle
</div>
jQuery

$( selector ).toggle()

Example 2
View
jQuery toggle
Source
<style type="text/css">
    .css_test {
        border-radius:5px;
        border:5px solid gray;
        box-shadow:0 0 5px silver;
        padding:20px;
    }
</style>

<button type="button" onclick="$('.css_test').stop().toggle(1000)">Click !! Click !! - toggle(1000)</button>

<div class="css_test">
    jQuery toggle
</div>
jQuery

$( selector ).toggle( millisecond )

Example 3
Use callback function
View
Source
<style type="text/css">
    .css_test {
        border-radius:5px;
        border:5px solid gray;
        box-shadow:0 0 5px silver;
        padding:10px;
    }
</style>

<button type="button" onclick="j_test()">Click !!</button>

<div class="css_test">
    <img src="http://cfile3.uf.tistory.com/image/2338433D552F50A40F94E7">
</div>

<script type="text/javascript">
    function j_test(){
        $('.css_test').stop().toggle(1000, function(){
            alert('Good !!');
        });
    }
</script>
jQuery

$( selector ).toggle( millisecond, function(){
    Code
})

Example 4
Use easing effects
View
Source
<style type="text/css">
    .css_test {
        border-radius:5px;
        border:5px solid gray;
        box-shadow:0 0 5px silver;
        padding:10px;
    }
</style>

<button type="button" onclick="$('.css_test').toggle(1000, 'easeInOutBack')">toggle(1000, 'easeInOutBack')</button>

<div class="css_test">
    <img src="http://cfile21.uf.tistory.com/image/237EED50550B9B3E0C912C">
</div>
jQuery .toggle() Documentation : http://api.jquery.com/toggle/