JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

<header>
    <ul class="gCards">
        <!--Card One Start-->
        <li>
            <section>
                <div class="dateSelectWrapper" id="dateSelectWrapper0">
                     <h3>Select a date One</h3>

                    <hr />
                    <div style="text-align: center;"> <span class="date">02 :</span>
 <span class="date">01 :</span>
 <span class="date">2014</span>

                    </div>
                </div>
                <div class="datePickerWrapper" id="datePickerWrapper0">
                     <h3>Pick a date One</h3>

                    <hr />
                    <div style="text-align: center;"> <span class="glyphicon glyphicon-chevron-down"></span>
 <span class="date"><span class="glyphicon glyphicon-chevron-up"></span>02 :</span> <span class="date">01 :</span>
 <span class="date">2014</span>

                    </div>
                </div>
            </section>
        </li>
        <!--Card One End-->
        <!--Card Two Start-->
        <li>
            <section>
                <div class="dateSelectWrapper" id="dateSelectWrapper1">
                     <h3>Select a date Two</h3>

                    <hr />
                    <div style="text-align: center;"> <span class="date">02 :</span>
 <span class="date">01 :</span>
 <span class="date">2014</span>

                    </div>
                </div>
                <div class="datePickerWrapper" id="datePickerWrapper1">
                     <h3>Pick a date Two</h3>

                    <hr />
                    <div style="text-align: center;"> <span class="glyphicon glyphicon-chevron-down"></span>
 <span class="date"><span class="glyphicon glyphicon-chevron-up"></span>02 :</span> <span class="date">01 :</span>
 <span class="date">2014</span>

                    </div>
                </div>
            </section>
        </li>
        <!--Card Two End-->
    </ul>
</header>

CSS

/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    font-family: Tahoma;
    font-size: 14px;
    color: #606060;
}
* {
    padding: 0;
    margin: 0;
    border: 0;
}
@font-face {
    font-family:'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
.dateSelectWrapper, .dateSelectWrapper1 {
    background-color: #F1F1F1;
    padding: 4px 8px;
    width: 250px;
    margin: 25px;
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    /*position: absolute;
    top: 10%;
    left: 40%;*/
}
.datePickerWrapper, .datePickerWrapper1 {
    background-color: #F1F1F1;
    padding: 4px 8px;
    width: 250px;
    margin: 25px;
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    position: absolute;
    top: 10%;
    left: 40%;
}
.hover {
    background-color: #666;
    color: #fff;
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transform: rotateY(180deg) scale(2, 2);
    -webkit-transform: rotateY(180deg) scale(2, 2);
    -moz-transform: rotateY(180deg) scale(2, 2);
    -o-transform: rotateY(180deg) scale(2, 2);
    position: absolute;
    top: 10%;
    left: 40%;
}
.hoverCollapse {
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
   ...

JavaScript

$(document).ready(function () {
    var i;
    var cout = $("ul.gCards li").length;
    for (i = 0; i < cout; i++) {
        $("#dateSelectWrapper" + i).click(function () {
            $(this).toggleClass("hover");
            if ($(this).hasClass("hover")) {
                window.setTimeout(function () {
                    $(this).siblings(".datePickerWrapper").css("display", "block");
                }, 220);
            } else {
                window.setTimeout(function () {}, 200);
            }
        }); //#dateSelectWrapper + cout end
    } //for end

    $(".datePickerWrapper").click(function () {
        if ($(this).css("display", "block")) {
            $(".dateSelectWrapper").removeClass("hover");
        }
    });
}); //document end