jQuery toggle class

Toggle class of html elements with jQuery.

by M Shameer

HTML

<div class="wrapper">
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
</div>

CSS

body {
    background: #f1f1f1;
}

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }

.section {
    display: block;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    margin: 0;
    -moz-animation: fadeIn .5s ease;
    -webkit-animation: fadeIn .5s ease;
    animation: fadeIn .5s ease;
    transition: margin 700ms ease;
}
.section.open {
    margin: 20px 0;
}

JavaScript

$(".section").click(function () {
    $(this).toggleClass("open");
});