JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="sh-parent">
  <a href="#" class="sh-btn">кнопка1</a>
  <div class="sh-content">
    содержимое
  </div>
</div>
<div class="sh-parent">
  <a href="#" class="sh-btn">кнопка2</a>
  <div class="sh-content">
    содержимое
  </div>
</div>
<div class="sh-parent">
  <a href="#" class="sh-btn">кнопка3</a>
  <div class="sh-content">
    содержимое
  </div>
</div>
<div class="sh-parent">
  <a href="#" class="sh-btn">кнопка4</a>
  <div class="sh-content">
    содержимое
  </div>
</div>

CSS

.sh-content {
  display: none;
}
.sh-parent.opened .sh-content {
  display: block;
}

JavaScript

var doc = $(document),
		parent, content;

function beforeShow() {
	$('.sh-parent').removeClass('opened');
}
	
doc.ready(function(){
	doc.on('click', '.sh-parent .sh-btn', function(e){
    e.preventDefault();
    parent = $('.sh-parent', doc).has($(this)).last();
    content = $('.sh-content', parent);
    if (content.css('display') == 'none') {
      beforeShow();
      parent.addClass('opened');
    }
    else {
      parent.removeClass('opened');
    }
  });
});