JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="level-1">
    <div class="level-11">
        <div id="content-1" class="level-111" style="height: 100%;">
            <img src="http://s.picsfab.com/static/contents/images/8/b/e/aab5905d35ede059278a82138a902.jpg" />
        </div>
        <div id="content-2" class="level-111">
            <img src="http://s.picsfab.com/static/contents/images/d/9/d/1b9d8372c9a96b98684cb24a8f03a.jpg" />
        </div>
        <div id="content-3" class="level-111">
            <img src="http://s.picsfab.com/static/contents/images/9/d/2/ef075bca8f0f837f319a4c7fea781.jpg" />
        </div>
        <div id="content-4" class="level-111">
            <img src="http://s.picsfab.com/static/contents/images/a/4/d/80a637eeba36a0b5bf4b830462962.jpg" />
        </div>
    </div>
    <div class="level-12">
        <div class="level-121" data-btn="1" style="color: rgb(255, 255, 255); background: rgb(68, 170, 255);">Собаки</div>
        <div class="level-121" data-btn="2">Тигр</div>
        <div class="level-121" data-btn="3">Медведь</div>
        <div class="level-121" data-btn="4">Обезьяна</div>
    </div>
</div>

CSS

.level-1 {
    border: 1px solid #ddd;
    border-bottom: 0 solid #ddd;
    display: block;
    margin: 10px auto;
    width: 500px;
}
.level-11 {
    border-bottom: 1px solid #ddd;
    display: block;
    position: relative;
    height: 312px;
}
.level-111 {
    background: #C7E5FF;
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    height: 0;
}
.level-121 {
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    display: block;
    line-height: 28px;
    padding: 0 10px;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.level-111 img {
    width: 100%;
}
.level-121:hover {
    background: #EFEFEF;
}
.level-121.active {
    background: #44AAFF;
    color: #ffffff;
}
.ht {
}

JavaScript

$(document).on('click', '[data-btn]', function () {
    var id = $(this).data('btn'),
        wh = $('#content-' + id).css('height');

    if (wh == '0px') {
        $('.level-111').animate({
            opacity: '0',
            height: '0%'
        }, 100);
        $('.level-12 > div').animate({
            color: '',
            background: ''
        }, 100);

        setTimeout(function () {
            $('#content-' + id).animate({
                opacity: '1',
                height: '100%'
            }, 100);
            $('[data-btn="' + id + '"]').css({
                color: '#ffffff',
                background: '#44aaff'
            }, 100);
            id = "";
        }, 200);
    }
});