JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>
<a href="#" class="collapse-arrow room-collapse"> Lalji
    <i class="fa fa-caret-down"></i>
</a>
<div class="slide-div">
  164646 16646 
</div>

CSS

.fa {
  padding: 5px 8px;
  transition: all .2s ease-in-out;
  transform: rotate(0);
  font-size: 15px;
  color: #000;
}
.collapsed .fa {
    transform: rotate(-180deg);
  }

JavaScript

$(document).on("click", ".collapse-arrow", function() {
    $(this).toggleClass("collapsed");
    $(".slide-div").slideToggle(500);
});