JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div id="a">
		
		<div  id="extra" class="container">
        					<ul class="horizontal">
														
							
							<li>
							<div id="flip-2" class="flip"><h2 style="color:#fff;" >LOCATION</h2></div>
							                            
							</li>
							<li>
							<div id="flip-3" class="flip"><h2 style="color:#fff;">APARTMENT TYPE</h2></div>
							
                        	</li>
							<li>
								<div id="flip-4" class="flip"><h2 style="color:#fff;">AMENTIES</h2></div>
							</li>
							<li>	
							<div id="flip-5" class="flip"><h2 style="color:#fff;">FEATURES & FINISHES</h2></div>
								
								</li>
							

						</ul>

		</div>





 
<div  id="panel2" class="flip-panel">
<p>ABBBB 2</p></div>
<div id="panel3" class="flip-panel">
<p>ABBBB 3</p></div>

<div id="panel4" class="flip-panel">
<p>ABBBB 4</p>
</div>
<div id="panel5" class="flip-panel">
<p>ABBBB 5</p>
</div>

CSS

.flip
{
padding:5px;
text-align:center;
background-color:#0e9158;
border:solid 1px #c3c3c3;

}
#panel2,#flip-2
{
padding:5px;
text-align:center;
background-color:#0e9158;
border:solid 1px #c3c3c3;
}
#panel2
{
padding:50px;
display:none;
}
#panel3,#flip-3
{
padding:5px;
text-align:center;
background-color:#0e9158;
border:solid 1px #c3c3c3;
}
#panel3
{
padding:50px;
display:none;
}
#panel4,#flip-4
{
padding:5px;
text-align:center;
background-color:#0e9158;
border:solid 1px #c3c3c3;
}
#panel4
{
padding:50px;
display:none;
}


#panel5,#flip5
{
padding:5px;
text-align:center;
background-color:#0e9158;
border:solid 1px #c3c3c3;
}
#panel5
{
padding:50px;
display:none;
}

JavaScript

$(document).ready(function(){
 
  $(".flip").click(function(event){
     
      $(".flip-panel").slideUp("slow");
    $("#panel"+this.id.split('-')[1]).slideDown("slow");
  });
});