JSFiddle - React, Tailwind, and code Playground

by Brandon

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">Implement Knowledge Management through a phased approach to achieve an effective and efficient knowledge sharing environment that fosters informed and timely decisions supported by accurate, actionable information.
</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>

CSS

.MissionContainer {
    border: #3e628f 10px solid;
    background: #e2ebfc;
    min-height: 60px;
    margin-left: 47px;
    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;
	font-size: 16px;
}
.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: calc(50% - 12px);
    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: calc(50% - 12px);
    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();
   
    if (MissionBarHeight < 50) {
        $('.ClickToExpandMissionBanner').css({
            'display': 'none'
        });
        $('.ClickToCloseMissionBanner').css({
            'display': 'none'
        });
        $( ".ClickToCloseMissionBanner" ).trigger( "click" );
    } else {
   
        if (missionbarToggle === false) {
            $('.ClickToExpandMissionBanner').css({
                'display': 'block'
            });
        } else {
            $('.ClickToCloseMissionBanner').css({
                'display': 'block'
            });
        }
    }
};

$('.ClickToExpandMissionBanner').click(function () {
  
    if (missionbarToggle === false) {

        $('.GradientOverlay').css({
            'display': 'none'
        });
        $('.ClickToExpandMissionBanner').css({
            'display': 'none'
        });
        $('.ClickToCloseMissionBanner').css({
            'display': 'block'
        });
        $('.MissionContainer').animate({ 'height': $('.MissionBar').height() + 20 }, 200);
        missionbarToggle = true;
    }
});

$('.ClickToCloseMissionBanner').click(function () {
   
    if (missionbarToggle === true) {
        
        $('.GradientOverlay').css({
            'display': 'block'
        });
        $('.ClickToCloseMissionBanner').css({
            'display': 'none'
        });
        $('.ClickToExpandMissionBanner').css({
            'display': 'block'
...