JSFiddle - React, Tailwind, and code Playground

by monkichik

HTML

<div class="animateWrap">
    <div id="btn_howtojoin" class="btn_group">
        How to join
        <div class="btn_close">Close</div>
        <div class="content">Content</div>
    </div>
    <div id="btn_judgecriteria" class="btn_group">
        Judge
        <div class="btn_close">Close</div>
        <div class="content">Content</div>
    </div>
    <div id="btn_prizeinfo" class="btn_group">
        Prize info
        <div class="btn_close">Close</div>
        <div class="content">Content</div>
    </div>
    <div class="clear00"></div>
</div>
<div class="clear00"></div>
<div class="reset">This is an extra close button</div>

CSS

.animateWrap {
    width:90%;
    margin:0 auto;
}
.btn_group {
    width: 33.3%;
    height: 220px;
    float: left;
    cursor: pointer;
    position:relative;
}
.clear00 {
    float:none;
    clear:both;
    height:0px;
}
#btn_howtojoin {
    background: #fcb2b2 url(../images/title_howtojoin.png) no-repeat 50% 50%;
    width: 33.4%;
}
#btn_howtojoin:hover {
    background-color:#f19c9c;
}
#btn_judgecriteria {
    background: #7acccb url(../images/title_judge.png) no-repeat 50% 50%;
}
#btn_judgecriteria:hover {
    background-color: #69C2C1;
}
#btn_prizeinfo {
    background: #f1c348 url(../images/title_prize.png) no-repeat 50% 50%;
}
#btn_prizeinfo:hover {
    background-color: #e5b329;
}
.btn_group .content {
    position:absolute;
    top:-400px;
    left:40px;
}
.btn_close {
    position:absolute;
    top:20px;
    right:20px;
    color:#FFF;
    width: 40px;
    height:62px;
    display:none;
}
.reset {
    display:block;
    width:100px;
    color:#333;
    background-color:#eee;
    border:1px solid #eee;
    padding:5px;
    cursor:pointer;
}

JavaScript

$(function () {


    $('#btn_judgecriteria').bind('click', function () {
        $(this).animate({
            width: "100%"
        }, function () {

            $(this).animate({
                height: "400px"
            });

            $('.btn_close').show();

        });

        $('#btn_prizeinfo').animate({
            width: "0%"
        });
        $('#btn_howtojoin').animate({
            width: "0%"
        });

    });

    $('#btn_howtojoin').bind('click', function () {

        $(this).animate({
            width: "100%"
        }, function () {

            $(this).animate({

                height: "400px"
            });


            $(this).find('.content').animate({
                top: "40px"
            });

            $('.btn_close').show();

        });

        $('#btn_prizeinfo').animate({
            width: "0%"
        });
        $('#btn_judgecriteria').animate({
            width: "0%"
        });

    });


    $('#btn_prizeinfo').bind('click', function () {

        $(this).animate({
            width: "100%"
        }, function () {

            $(this).animate({
                height: "400px"
            });

            $('.btn_close').show();

        });

        $('#btn_howtojoin').animate({
            width: "0%"
        });
        $('#btn_judgecriteria').animate({
            width: "0%"
        });

    });

    $('.btn_close').bind('click', function () {
        $('.btn_group').animate({
            width: "33.333%",
            height: "220px"
        });

        $('.btn_group .content').hide();

        $('.btn_close').hide();
    });

    //extra close button
    $('.reset').bind('click', function () {
        $('.btn_group').animate({
            width: "33.333%",
            height: "220px"
        });

        $('.btn_group .content').hide();

        $('.btn_close').css("display", "none");
    });

});