JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title">
           <div class="text">Текст</div>
           <div class="arrow1"></div>
         </div>


         <div class="description">
           text...

         </div>


         <div class="title">
           <div class="text">Текст</div>
           <div class="arrow1"></div>
         </div>


         <div class="description">
           text...
         </div>

CSS

.title {
 padding: 20px 30px;
 width: 100%;
 border: none;
 text-align: left;
 position: relative;
}

.arrow1{
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 13px;
  background-color: #dddddd;
}

.arrow2{
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 13px;
  background-color: red;
}

.description {
 display: none;
 background-color: white;
}

JavaScript

let title = document.querySelectorAll(".title");
let arrow1 = document.querySelectorAll(".arrow1");

for (let i = 0; i < title.length; i++) {
 title[i].addEventListener("click", function() {
      arrow1[i].classList.toggle("arrow2");
   let description = this.nextElementSibling;
   if (description.style.display === "block") {
     description.style.display = "none";
   } else {
     description.style.display = "block";
   }
});
}