JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="menu">
      <div class="btn">CLICK</div>
      <div class="btn">CLICK</div>
      <div class="btn">CLICK</div>
  </div>
  <div class="hidden-content">
      <h1>Content</h1>
  </div>
</div>

SCSS

.container {
    display: flex;
}

.menu {
  width: 50%;
}

.btn {
  background-color: #1f2227;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  
  &:hover {
    background-color: #0f1113;
  }
  
  &.open {
    background-color: #0f1113;
  }
}

.hidden-content {
  padding: 10px;
  border: 1px solid #0f1113;
  border-radius: 5px;
  width: 50%;
  margin: 5px;
  display: none;
}

JavaScript

$('.btn').click(function() {             
  var obj = $(this);

  if (  $('.btn').hasClass('open') ) {
    $('.btn').removeClass('open');
  }

  if ( obj.hasClass('open') ) {
    obj.removeClass('open');
  } else {
    obj.addClass('open');
  }

  $(".hidden-content").show("slide");          
});
    
//This is what I tought would solve my problem...     
$('.btn.open').click(function() {
  var obj = $(this);

  obj.removeClass('open');

  $(".hidden-content").hide("slide");
});