JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div id="sidebox">
    <div id="bar-container">
    <div class="bars">
    <img id="but1">
    </div>
    <div class="bars">
    <img id="but2">
    </div>
    <div class="bars">
    <img id="but3">
    </div>
    <div class="bars">
    <img id="but4">
    </div>
        </div>
    <div class="content">
    <span class="but1">Button One some more text</span>
    </div>
    <div class="content">
    <span class="but2">Button 2 some more text</span>
    </div>
     <div class="content">
    <span class="but3">Button 3 some more text</span>
    </div>
     <div class="content">
    <span class="but4">Button 4 some more text</span>
    </div>
</div>

CSS

#sidebox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #D2CEC2;
    border-radius: 10px;
    box-shadow: 0 0 1px #EDF9FF inset;
    height: 240px;
    margin: 80px auto 0 0;
    padding: 0 30px 0 10px;
    width: 190px;
}
.bars {
    background: -moz-linear-gradient(center top , #0272A7, #013953) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #002232;
    border-radius: 10px;
    box-shadow: 0 0 1px #EDF9FF inset;
    float: left;
    height: 43px;
    list-style: none outside none;
    margin: 10px 0 0;
    padding: 0;
    width: 200px;
}
#bar-container {
    width:205px;
    display:inline-block;
    float:left
}
.content span {
    display:none
}
}

JavaScript

$(function() {
		$("#sidebox").mouseenter(function(){
        $(this).animate({width: '600px'});
		})
		$("#sidebox").mouseleave(function(){
        $(this).animate({width: '190px'});
		})
		$(".bars").hover(function(){
  		$(".content ."+$("img",this).attr("id")).toggle()  
		})
		})