JSFiddle - React, Tailwind, and code Playground

by Rohit Azad

HTML

<div id="accordion">  
  
     <h2><a href="#">Accordian Tab 1</a></h2>  
     <div>  
          <p>Accordian Tab 1 Data</p>  
     </div>  
  
     <h2><a href="#">Accordian Tab 2</a></h2>  
     <div>  
          <p>Accordian Tab 2 Data</p>   
     </div>  
  
     <h2><a href="#">Accordian Tab 3</a></h2>  
     <div>  
          <p>Accordian Tab 3 Data</p>  
     </div> 
    
    <h2><a href="#">Accordian Tab 4</a></h2>  
     <div>  
          <p>Accordian Tab 4 Data</p>  
     </div>
  
</div>

CSS

body    
{     
    font-family:arial; font-size:12px;  
}          
#accordion h2   
{     
    padding: 10px;      
    margin: 0;  
    border: 1px solid #4679bd;   
    background-color: #4072b4;  
    font-size: 14px;  
    border-top: 3px solid #ccc;  
}    
#accordion h2 a     
{    
    text-decoration: none;    
    color: #ffffff;     
}    
#accordion div     
{      
    padding: 0 10px;      
    margin: 0;   
    border: 1px solid #4679bd;  
    color:#000;    
       
}

JavaScript

$(document).ready(function() {  
      $("#accordion div").hide();  
      
      $("#accordion h2").click(function() {         
         $(this).next("#accordion div").slideToggle("slow").siblings("#accordion div").slideUp("slow");  
      });  
  
});