JSFiddle - React, Tailwind, and code Playground

by fixeDis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Первый аккордеон-->
<ul accordion='test'>
     <li><a href='1'>item1</a></li>
     <li><a href='2'>item2</a></li>
</ul>

<div test='1' style='display:none;'>
      ####item1####
</div>
<div test='2' style='display:none;'>
      ####item2####
</div>

<!--Второй аккордеон-->
<ul accordion='test2'>
     <li><a href='1'>item1!!!</a></li>
     <li><a href='2'>item2!!!</a></li>
</ul>

<div test2='1' style='display:none;'>
      ####item1!!!####
</div>
<div test2='2' style='display:none;'>
      ####item2!!!####
</div>

JavaScript

$(document).on('click', "[accordion]", function(event){
      event.preventDefault();
      event.stopPropagation();
      var target = event.target;
      var check = $(this).attr('accordion');
      $("["+check+"]").fadeOut(0);
      $("["+check+"='"+$(target).attr('href')+"']").fadeIn(300);    
});