JSFiddle - React, Tailwind, and code Playground

by Miro Hristov

HTML

<div class="container">
		<div id="left-panel">
			<ul>
				<li class="first-left"><a href="#"><img src="http://demandware.edgesuite.net/aanx_prd/on/demandware.static/Sites-SaksOff5th-Site/Sites-SaksOff5th-Library/default/v1423527741463/images/homepage/01_020415_MHP_HERO_01_tab.png" /></a></li>
				<li class="second-left"><a href="#"><img src="http://demandware.edgesuite.net/aanx_prd/on/demandware.static/Sites-SaksOff5th-Site/Sites-SaksOff5th-Library/default/v1423527741463/images/homepage/01_020415_MHP_HERO_02_tab.png" /></a></li>
				<li class="third-left"><a href="#"><img src="http://demandware.edgesuite.net/aanx_prd/on/demandware.static/Sites-SaksOff5th-Site/Sites-SaksOff5th-Library/default/v1423527741463/images/homepage/01_020415_MHP_HERO_03_tab.png" /></a></li>
				<li class="fourth-left"><a href="#"><img src="http://demandware.edgesuite.net/aanx_prd/on/demandware.static/Sites-SaksOff5th-Site/Sites-SaksOff5th-Library/default/v1423527741463/images/homepage/01_020415_MHP_HERO_04_tab.png" /></a></li>
			</ul>
		</div>
		
		<div id="right-panel">
			<ul>
			<li class="first-right"><a href="#"><img src="http://www.saksfifthavenue.com/emailMedia/Off5Website/01-020415-MHP-HERO1.jpg" /></a></li>
			<li class="second-right"><a href="#"><img src="http://www.saksfifthavenue.com/emailMedia/Off5Website/01-020415-MHP-HERO2.jpg" /></a></li>
			<li class="third-right"><a href="#"><img src="http://www.saksfifthavenue.com/emailMedia/Off5Website/01-020415-MHP-HERO3.jpg" /></a></li>
			<li class="fourth-right"><a href="#"><img src="http://www.saksfifthavenue.com/emailMedia/Off5Website/01-020415-MHP-HERO4.jpg" /></a></li>
			</ul>
		</div>
	</div>

CSS

.container{
			width:1200px;
			margin:0px auto;
		}
		#left-panel{
			width:20%;
			float:left;
		}
		#left-panel ul li a:hover{
			background-color:#eeeeee;
		}
		#left-panel ul li{
			list-style-type:none;
		}
		#right-panel ul li{
			list-style-type:none;
		}
		#right-panel{
			width:80%;
			float:left;
		}

JavaScript

$(document).ready(function(){
    
    //Hide all except the first
    $("#right-panel ul li").not("#right-panel ul li.first-right").stop().slideUp("Fast");
    
    
			$("#left-panel ul li.first-left").mouseover(function(){
				//Hide all
                $("#right-panel ul li").stop().slideUp("Fast");
                //Show the first 
                $("#right-panel ul li.first-right").stop().slideDown("Fast");
			});
		
			$("#left-panel ul li.second-left").mouseover(function(){
				$("#right-panel ul li").stop().slideUp("Fast");
                $("#right-panel ul li.second-right").stop().slideDown("Fast");
			});
			
			$("#left-panel ul li.third-left").mouseover(function(){
				$("#right-panel ul li").stop().slideUp("Fast");
                $("#right-panel ul li.third-right").stop().slideDown("Fast");
			});
			
			$("#left-panel ul li.fourth-left").mouseover(function(){
				$("#right-panel ul li").stop().slideUp("Fast");
                $("#right-panel ul li.fourth-right").stop().slideDown("Fast");
			});
		});