jQuery .toggleClass() Examples

Welcome To jQuery !!
+_+
Example 1
View
Press the button multiple times !!

Source
<style type="text/css">
    .css_test {
        margin-top:20px;
    }
    .css_test .border_radius {
        border-radius:50px;
    }
    .css_test .box_shadow {
        box-shadow:0 0 10px black;
    }
    .css_test .border {
        border:5px solid gray;
    }
    .css_test .padding {
        padding:10px;
    }
</style>

Press the button multiple times !!<br><br>
<button type="button" onclick="$('.css_test img').toggleClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').toggleClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').toggleClass('border')">border</button>
<button type="button" onclick="$('.css_test img').toggleClass('padding')">padding</button>

<div class="css_test">
    <img class="border_radius box_shadow border padding" src="http://cfile4.uf.tistory.com/image/26138D4854D73515223B87" />
</div>
Example 2
View
Press the button multiple times !!


Source
<style type="text/css">
    .css_test {
        margin-top:20px;
    }
    .css_test img {
        margin-top:5px;
        width:150px;
    }
    .css_test .border_radius {
        border-radius:30px;
    }
    .css_test .box_shadow {
        box-shadow:0 0 3px black;
    }
    .css_test .border {
        border:3px solid gray;
    }
    .css_test .padding {
        padding:5px;
    }
</style>

Press the button multiple times !!<br><br>
<button type="button" onclick="$('.css_test img').toggleClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').toggleClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').toggleClass('border')">border</button>
<button type="button" onclick="$('.css_test img').toggleClass('padding')">padding</button>

<div class="css_test">
    <img src="http://cfile9.uf.tistory.com/image/2523EC4F54D735163729D9" />
    <img src="http://cfile7.uf.tistory.com/image/232E7438555ABF4020230A" />
    <img src="http://cfile1.uf.tistory.com/image/2748B83D552F50A109BCF6" /><br>
    <img src="http://cfile21.uf.tistory.com/image/2469B33354D74FB23BC466" />
    <img src="http://cfile4.uf.tistory.com/image/276870375501AED00DC302" />
    <img src="http://cfile8.uf.tistory.com/image/277F823454D73318364AB0" />
</div>
jQuery .toggleClass() Documentation : https://api.jquery.com/toggleClass/