JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<span class='cs_accordion_action' data-acctarget='#1'>
  Action 1
</span>
<span class='cs_accordion_action' data-acctarget='#2'>
  Action 2
</span>
<span class='cs_accordion_action' data-acctarget='#3'>
  Action 3
</span>
<br><br><br>

<div class='cs_accordion_dis ac_accordion_active' id='1'>
  Discription for Action 1 Discription for Action 1 Discription for Action 1 Discription for Action 1 Discription for Action 1 Discription for Action 1 Discription for Action 1 Discription for Action 1
</div>
<div class='cs_accordion_dis' id='2'>
  Discription for Action 2 Discription for Action 2 Discription for Action 2 Discription for Action 2 Discription for Action 2 Discription for Action 2 Discription for Action 2
</div>
<div class='cs_accordion_dis' id='3'>
  Discription for Action 3 Discription for Action 3 Discription for Action 3 Discription for Action 3 Discription for Action 3 Discription for Action 3 Discription for Action 3 Discription for Action 3
</div>

CSS

.cs_accordion_action{
  cursor:pointer;
}
.cs_accordion_dis{
  display:none;
  transition:1s ease;
}
.ac_accordion_active{
  display:block;
  transition:1s ease;
}

JavaScript

$(document).ready(function(e){
  
  $(document).on('click','.cs_accordion_action',function(){
  	var a = $(this).data('acctarget');  
    $('.cs_accordion_dis').removeClass('ac_accordion_active');
    $(a).addClass('ac_accordion_active');
  });
  
});