JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<div class="cat-lead">
    Cat title
</div>

<div class="product-list">
    This is a list
</div>

<div class="cat-lead">
    Cat title
</div>

<div class="product-list">
    This is a list
</div>

CSS

.cat-lead {
    padding: 10px 60px 10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(241, 111, 113, 1);
margin-top: 20px;
background-image: url(../image/drop_arrow.png);
background-repeat: no-repeat;
height: 65px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-position: right 10px bottom 35px;
cursor:pointer;
}
.droppedlist {
    background-image: url(../image/cross.png);
-webkit-border-radius: 5px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-radius: 5px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.product-list {
background: rgba(255, 207, 207, 1);
height: auto;
    display:none;
padding-bottom: 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

JavaScript

$(document).ready(function() {  
     var $allCats = $(".cat-lead");
     $allCats.click(function(e) {
		 $allCats.not(this).removeClass('droppedlist').next(".product-list").slideUp(500, 'linear')
         
       $(this).next(".product-list").slideToggle(500, 'linear'),
	   $(this).toggleClass('droppedlist');
		e.preventDefault();
		
	   });
   });
	
    var isActive = $(this).hasClass('droppedlist');
    $('.product-list').removeClass('droppedlist'); 
    
    $(this).stop(true,true);
    if(!isActive){
        $(this).addClass("droppedlist");
    }