JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<div id="phleb_container">
	    <div id="left">
		    <ul class="patient_list">
		    	<li class="patient green">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li>
		    	<li class="patient red">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>

		    </ul>
		    
		    
		    
	    </div>
	    <div id="center">
		    <div id="drawer">
		    Drawer!
		    <input class="button closedrawer" type="submit" value="Close">
		    </div>
		    
		    
		    
		    
	    </div>
	    <div id="right">Right.</div>
    </div>
	
   <div id="doe" class="hidden">
       content
    </div
     <div id="adams" class="hidden">
       content
    </div

CSS

#phleb_container{
    display:block;
    margin:0;
    padding:0;
    width:100%;
    height:500px;;
    outline:1px solid #444;
}

.hidden{
 display: none;   
} 

#left{
    float:left;
    display:block;
    margin:0;
    padding:0;
    width:200px;
    height:500px;
  
}

#right{
    float:right;
    display:block;
    margin:0;
    padding:0;
    width:100px;
    height:500px;
    background:#ccc;	
	
}

#center{
    float:left;
    display:block;
    margin:0;
    padding:0;
    width:100px;
    height:500px;
    overflow: hidden;
}


.patient_list{
	list-style: none;
	margin-left: -40px;
	height: 465px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.patient{
	display: none;
	
}

.patient_list li{
	height: 20px;
	border-bottom: 1px solid #ccc;
	width: 170px;
	padding: 10px;
	opacity: 0.7;
}

.patient_list li:first-child{
	padding-top: -10px;
	border-top: 1px solid #ccc;
}

.patient_list li img{
float: right;
width: 16px;
height: 16px;
border: 0;
line-height: 20px;
vertical-align: middle;
margin-top: 2px;
opacity: 0.7;
}

.patient_list li:hover img, .patient_list li:hover, imgfix:hover{
opacity: 1;

}

.imgfix{
	margin-right: 2px;
	height: 16px;
	width: 16px;
	border: 0;
	line-height: 20px;
	vertical-align: middle;
	margin-top: 2px;
	opacity: 0.7;
	float: right;
}

.green{
	background-color: #84fa8e;	
}

.red{
	background-color: #fa8486;	
}

.blue{
	background-color: #848cfa;	
}

.yellow{
	background-color: #dffa84;	
}


#drawer{
	width: 470px;
	background: orange;
	height: 430px;
	margin-top: 30px;
	display: none;
}

JavaScript

$(document).ready(function() {
    
		     
	     $(".patient").toggle(function(){
		    $(this)
		        $('#drawer').slideDown("slow")
		        
			}, function(){
			    $(this)
			    $('#drawer').slideUp("slow")	
			              
			});

	
			function slideIt(i){
			   var el =$(".patient:eq("+i+")");
			   if(el != undefined)
			        el.delay(1000).slideDown(1000);
			   setTimeout(function(){slideIt(++i)}, 300);
			}
	        
	        
	        slideIt(0);
	        
	
	      });