jQuery .slideToggle() Examples

Welcome To jQuery !!
+_+
Example 1
View
Source
<style type="text/css">
    .css_test {
        border-collapse:collapse;
        border:5px solid gray;
        padding:5px;
        text-align:center;
    }
    .css_test td {
        border:1px solid black;
        width:160px;
        height:150px;
    }
    .css_test img {
        max-width:140px;
        max-height:140px;
    }
    .css_test img.hide {
        display:none;
    }
</style>

<button type="button" onclick="$('.css_test img').slideToggle()">Click ! Click !!</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="http://cfile10.uf.tistory.com/image/224D643854D74C4F158B11" /></td>
        <td><img src="http://cfile25.uf.tistory.com/image/22528D4C550B9B3A03BA1D" class="hide" /></td>
        <td><img src="http://cfile26.uf.tistory.com/image/2509693354D74FB5036873" /></td>
    </tr>
    <tr>
        <td><img src="http://cfile3.uf.tistory.com/image/2366EB4B550B9B37158B87" class="hide" /></td>
        <td><img src="http://cfile21.uf.tistory.com/image/237EED50550B9B3E0C912C" /></td>
        <td><img src="http://cfile2.uf.tistory.com/image/2604833354D74FB40E65BC" class="hide" /></td>
    </tr>
    <tr>
        <td><img src="http://cfile22.uf.tistory.com/image/21695738550B923B092EF5" /></td>
        <td><img src="http://cfile6.uf.tistory.com/image/24604B4B550B9B37182BB7" class="hide" /></td>
        <td><img src="http://cfile21.uf.tistory.com/image/237EED50550B9B3E0C912C" /></td>
    </tr>
</table>
jQuery

$( selector ).slideToggle()

Example 2
View
Source
<style type="text/css">
    .css_test {
        border-collapse:collapse;
        border:5px solid gray;
        padding:5px;
        text-align:center;
    }
    .css_test td {
        border:1px solid black;
        width:160px;
        height:150px;
    }
    .css_test img {
        max-width:140px;
        max-height:140px;
    }
    .css_test img.hide {
        display:none;
    }
</style>

<button type="button" onclick="$('.css_test img').stop().slideToggle(100)">slideToggle(100)</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(500)">slideToggle(500)</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(1000)">slideToggle(1000)</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle()">slideToggle()</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="http://cfile1.uf.tistory.com/image/2748B83D552F50A109BCF6" /></td>
        <td><img src="http://cfile5.uf.tistory.com/image/223D2D4C550B9B3B0DFBD9" class="hide" /></td>
        <td><img src="http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8" /></td>
    </tr>
    <tr>
        <td><img src="http://cfile22.uf.tistory.com/image/267B673354D74FB31C484A" class="hide" /></td>
        <td><img src="http://cfile24.uf.tistory.com/image/261E554B550B9B3939FA13" /></td>
        <td><img src="http://cfile9.uf.tistory.com/image/25150D38550B923D321E76" class="hide" /></td>
    </tr>
    <tr>
        <td><img src="http://cfile28.uf.tistory.com/image/2341424F54D735170D2966" /></td>
        <td><img src="http://cfile1.uf.tistory.com/image/2748B83D552F50A109BCF6" class="hide" /></td>
        <td><img src="http://cfile22.uf.tistory.com/image/2264874654D5A16A326A6F" /></td>
    </tr>
</table>
jQuery

$( selector ).slideToggle( millisecond )

Example 3
Use easing effects
View
Source
<style type="text/css">
    .css_test {
        border-collapse:collapse;
        border:5px solid gray;
        padding:5px;
        text-align:center;
    }
    .css_test td {
        border:1px solid black;
        width:240px;
        height:200px;
    }
    .css_test img {
        max-width:200px;
        max-height:200px;
    }
    .css_test img.hide {
        display:none;
    }
</style>

<button type="button" onclick="$('.css_test img').stop().slideToggle(1000, 'easeInCirc')">easeInCirc</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(1000, 'easeInOutBack')">easeInOutBack</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(1000, 'easeInBounce')">easeInBounce</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(1000, 'easeInElastic')">easeInElastic</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="http://cfile26.uf.tistory.com/image/2509693354D74FB5036873" /></td>
        <td><img src="http://cfile21.uf.tistory.com/image/2469B33354D74FB23BC466" class="hide" /></td>
    </tr>
    <tr>
        <td><img src="http://cfile3.uf.tistory.com/image/2338433D552F50A40F94E7" class="hide" /></td>
        <td><img src="http://cfile23.uf.tistory.com/image/23285B4D55AC84AD335475" /></td>
    </tr>
</table>
jQuery

$( selector ).slideToggle( millisecond, 'effects name' )

jQuery .slideToggle() Documentation : http://api.jquery.com/slideToggle/