JSFiddle - React, Tailwind, and code Playground

by seano666

HTML

<div class="wrap">
    <div class="expando five"></div>
    <div class="expando four"></div>
    <div class="expando three"></div>
    <div class="expando two"></div>
    <div class="expando one"></div>
</div>

CSS

.wrap
{
    width:auto;
    height:300px;
    border:2px solid darkslategray;
}

.expando
{
    height:300px;
    width:80px;
    float:right;
    border-top:0px solid white;
    border-right:0px solid white;
    cursor:pointer;
}

.one{ background-color:blue; }
.two{ background-color:red; }
.three{ background-color:green; }
.four{ background-color:orange; }
.five{ background-color:purple; }

JavaScript

$('.expando').hover(function(){
    $(this).animate({borderWidth:"5px"},300);
    $('.expando').not(this).css("opacity","0.3");
    },function(){
    $(this).animate({borderWidth:"0px"},100);
    $('.expando').css("opacity","1.0");
});