JSFiddle - React, Tailwind, and code Playground

by Adi Jaya

HTML

<div class="ts-acordeon">
  <a class="ts-acordeon-title" href="#xxxxxx">Section-1</a>
  <div class="ts-acordeon-body open" id="xxxxxx">
    <p>
      dsdfsdf sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdf sdfsdfsd
    </p>
  </div>
  <a class="ts-acordeon-title" href="#yyyyyy">Section-2</a>
  <div class="ts-acordeon-body" id="yyyyyy">
    <p>
      dsdfsdf sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdf sdfsdfsd
    </p>
  </div>
  <a class="ts-acordeon-title" href="#zzzzzz">Section-3</a>
  <div class="ts-acordeon-body" id="zzzzzz">
    <p>
      dsdfsdf sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdf sdfsdfsd
    </p>
  </div>
</div>

CSS

.ts-acordeon {}
.ts-acordeon-title {
    display: block;
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
}
.ts-acordeon-body {
    padding: 10px;
    margin: 0;
    display: none;
}
.ts-acordeon-body:target, .ts-acordeon-body.open {
  display: block;
}

JavaScript

$( document ).ready(function(){
    $( ".ts-acordeon-title" ).click(function(){
        var parent = $( this ).parents( ".ts-acordeon" );
        var target = $( this ).attr( "href" );
        parent.find( ".ts-acordeon-body" ).removeClass( "open" );
        $( target ).addClass( "open" );
    });
});