jQuery addClass example

Change class name on click in jQuery

by Satheesh Kumar

HTML

<div data-card-limit="4" class="box">
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
<div class="box-content">
box
</div>
</div>

CSS

body{
  background: #333333;
}
.box-content{
  background: #ffffff;
  display:inline-block;
  height: 75px;
  width: 75px;
}

JavaScript

$('document').ready(function () {
    $("[data-card-limit]").each(function () {
        var tm = $(this);
        var cardLimit = tm.attr("data-card-limit");
        var cardValue = 0;
        tm.find("> *").each(function () {
            cardValue++;
            $(this).attr("data-card", cardValue);
        });
        var delay = 0;
        tm.find("[data-card]").each(function (e) {
            var cardTotal = parseInt($(this).attr("data-card"));
            if (cardTotal > cardLimit) {
                delay = delay + 150;
                var delayTiming = delay + "ms";
                $(this).addClass("card-out").css({
                    "height": "0px",
                    "overflow": "hidden",
                    "animation-delay": delayTiming
                });
            }
            else {
                $(this).addClass("card-in");
            }
        });
    });
});

$('#view-services').click(function () {
    showIndCards();
    $('#view-services').fadeOut();
});

function showIndCards() {
    $(".card-out").each(function () {
        console.log($(this).attr("data-card"));
        $(this).removeClass("card-out");
        $(this).css({
            "display": "block",
            "height": "auto",
            "overflow": "hidden"
        });
        $(this).addClass("card-in");
    });
}