JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
    
$(".flip1").click(function(){
    $(".panel1").slideToggle("slow");
  });
    
$(".flip2").click(function(){
$(".panel2").slideToggle("slow");
  });
    
    $(".flip3").click(function(){
$(".panel3").slideToggle("10");
  });
    
});
</script>
 

</head>
 
<body>
 
<div class="panel1">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class="flip1">Show/Hide Panel</p>
    
<div class="panel2">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class="flip2">Show/Hide Panel</p>
    
<div class="panel3">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class="flip3">Show/Hide Panel</p>
</body>
</html>

CSS

div.panel1,p.flip1,div.panel2,p.flip2,div.panel3,p.flip3
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel1,div.panel2,div.panel3
{
height:120px;
display:none;
}