JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="NenLogo">
    <img src="https://navy.deps.mil/peoeis/sites/nen/res/NEN-logo-v2-100x100.png" height="100" width="100">
</div>
<div class="MissionContainer">
    <div class="GradientOverlay"></div>
    <div class="MissionBar">this is text. this this is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text. thisthis is text.</div>
</div>
<div class="ClickToExpandMissionBanner">
    <img src="https://navy.deps.mil/peoeis/sites/nen/res/Universal_QuickLaunch_Chevron-in.png" height="36" width="19">
</div>
<div class="ClickToCloseMissionBanner">
    <img src="https://navy.deps.mil/peoeis/sites/nen/res/Universal_QuickLaunch_Chevron-in.png" height="36" width="19">
</div>
    
    klasjdflaksdjflkajsdf

CSS

.MissionContainer {
    border: #3e628f 10px solid;
    background: #e2ebfc;
    min-height: 60px;
    margin-left: 47px;
    margin-top: 30px;
    margin-bottom: 20px;
    height: 60px;
    overflow: hidden;
    position: relative;
}
.NenLogo {
    height: 100px;
    width: 100px;
    margin-top: -10px;
    display: block;
    border-radius: 30px;
    position: absolute;
    z-index: 4;
}
.MissionBar {
    vertical-align: middle;
    margin-left: 60px;
    padding-top: 10px;
    margin-right: 20px;
    padding-bottom: 10px;
}
.GradientOverlay {
    background: linear-gradient(rgba(226, 235, 252, 0), #E2EBFC);
    height: 20px;
    bottom: 0;
    display: block;
    position: absolute;
    z-index: 3;
    width: 100%;
}
.ClickToExpandMissionBanner {
    width: 100px;
    height: 30px;
    background: #3E628F;
    text-align: center;
    margin-left: 50%;
    margin-top: -30px;
    cursor: pointer;
    border-bottom-right-radius: 15px 30px;
    border-bottom-left-radius: 15px 30px;
}
.ClickToCloseMissionBanner {
    width: 100px;
    height: 30px;
    background: #3E628F;
    text-align: center;
    margin-left: 50%;
    margin-top: -30px;
    cursor: pointer;
    line-height: 30px;
    border-bottom-right-radius: 15px 30px;
    border-bottom-left-radius: 15px 30px;
    display: none;
}
.ClickToExpandMissionBanner > img {
    transform: rotate(270deg);
    margin-top: -2px;
}
.ClickToCloseMissionBanner > img {
    transform: rotate(90deg) scaley(-1);
    margin-top: -4px;
}

JavaScript

$(initMissionBar());


$(window).resize(function () {
    missionBanner();
});

function initMissionBar() {
    if ($('.MissionBar').height() > 50) {
        $('.ClickToExpandMissionBanner').css({
            'display': 'block'
        });
    } else {
        $('.ClickToExpandMissionBanner').css({
            'display': 'none'
        });
        $('.ClickToCloseMissionBanner').css({
            'display': 'none'
        });
    }

}




var missionbarToggle = false; //true === open, false === closed

function missionBanner() {
    var MissionBarHeight = $('.MissionBar').height();
    console.log(MissionBarHeight);

    if (MissionBarHeight < 50) {

        console.log("Height less than 50");
        $('.ClickToExpandMissionBanner').css({
            'display': 'none'
        });
        $('.ClickToCloseMissionBanner').css({
            'display': 'none'
        });
    } else {
        console.log("Height greater than 50");
        if (missionbarToggle === false) {
            $('.ClickToExpandMissionBanner').css({
                'display': 'block'
            });
        } else {
            $('.ClickToCloseMissionBanner').css({
                'display': 'block'
            });
        }
    }
};


$('.ClickToExpandMissionBanner').click(function () {
    if (missionbarToggle === false) {
        console.log("open bar");
        $('.GradientOverlay').css({
            'display': 'none'
        });
        $('.ClickToExpandMissionBanner').css({
            'display': 'none'
        });
        $('.ClickToCloseMissionBanner').css({
            'display': 'block'
        });
        $('.MissionContainer').css({
            'height': 'inherit'
        });
        missionbarToggle = true;
    }
});
$('.ClickToCloseMissionBanner').click(function () {
    if (missionbarToggle === true) {
        console.log("close bar");
        $('.GradientOverlay').css({
            'display': 'block'
        });
        $('.ClickToCloseMissionBanner').css({
            'display':...