JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div class="navigationCard">
    <div class="contentCard">
        <div class="content content1"></div>
        <div class="content content2"></div>
    </div>
    <div class="nav campaignTop">Some Campaign Name</div>
    <div class="nav campaignBottom"><!--
        --><span>1</span><!--
        --><span>2</span><!--
        --><span>3</span><!--
        --><span>4</span>
    </div>
</div>
<div class="navigationCard">
    <div class="contentCard">
        <div class="content content1"></div>
        <div class="content content2"></div>
    </div>
    <div class="nav campaignTop">Some Campaign Name</div>
    <div class="nav campaignBottom"><!--
        --><span>1</span><!--
        --><span>2</span><!--
        --><span>3</span><!--
        --><span>4</span>
    </div>
</div>
<div class="navigationCard">
    <div class="contentCard">
        <div class="content content1"></div>
        <div class="content content2"></div>
    </div>
    <div class="nav campaignTop">Some Campaign Name</div>
    <div class="nav campaignBottom"><!--
        --><span>1</span><!--
        --><span>2</span><!--
        --><span>3</span><!--
        --><span>4</span>
    </div>
</div><div class="navigationCard">
    <div class="contentCard">
        <div class="content content1"></div>
        <div class="content content2"></div>
    </div>
    <div class="nav campaignTop">Some Campaign Name</div>
    <div class="nav campaignBottom"><!--
        --><span>1</span><!--
        --><span>2</span><!--
        --><span>3</span><!--
        --><span>4</span>
    </div>
</div><div class="navigationCard">
    <div class="contentCard">
        <div class="content content1"></div>
        <div class="content content2"></div>
    </div>
    <div class="nav campaignTop">Some Campaign Name</div>
    <div class="nav campaignBottom"><!--
        --><span>1</span><!--
        --><span>2</span><!--
        --><span>3</span><!--
        --><span>4</span>
    </div>
</div>
<div class="navigationCard">
   ...

CSS

body{
    background-color: #222222;
    margin: 0;
        padding: 0;
}
.navigationCard {
    display: inline-block;
    position: relative;
    height: 200px;
    width: 100%;
    -webkit-transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
    margin-bottom: 10px;
}
.expandedCard {
    height: 700px;
}
.nav {
    display: inline-block;
    position: absolute;
    height: 100px;
    width: 100%;

    left: 0;
    right: 0;
}
.campaignTop {
    top: 0;
    font-size: 70px;
    background-color: #aaaaaa;
    color: #222222;
}
.campaignBottom {
    bottom: 0;
    font-size: 50px;
        background-color: #eeeeee;
    color: #222222;
}
.campaignBottom > span {
    display: inline-block;
    margin: 0;
    width: 25%;
    height: 100%;
    text-align: center;
    border-left: 1px solid #bbbbbb;
        border-right: 1px solid #bbbbbb;
    box-sizing: border-box;
}
.contentCard {
    display: inline-block;
    height: 100%;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}
.content {
    display: inline-block;
    height: 100%;
    width: 90%;
}
.content1 {
    background-color: red;
}
.content2 {
    background-color: green;
}

JavaScript

var manualScroll = false;
$(".nav").click(function () {
    var navCard = $(this).parent();
    if (!$(navCard).hasClass("expandedCard")) {
        $(window).off("scroll");
        $('html,body').animate({
            scrollTop: navCard.offset().top - 200
        }, 700, function () {
            setTimeout(turnOnScrollDetection, 200);
        });
    }
    $(navCard).toggleClass("expandedCard");
});

$(window).scroll(function () {
    if (!manualScroll) {
        $(".expandedCard").removeClass("expandedCard");
    }
});

function turnOnScrollDetection() {
    $(window).on("scroll", function () {
        $(".expandedCard").removeClass("expandedCard");
    });
}