JSFiddle - React, Tailwind, and code Playground

by prunkster

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="menu">
  <div class="item">
    <h3 data-id="element-1" class="">Headline 1</h3>
    <div class="content" data-id="element-1">
      <p>test</p>
    </div>
  </div>
  <div class="item">
    <h3 data-id="element-2" class="">Headline 2</h3>
    <div class="content" data-id="element-2">
      <p>test</p>
    </div>
  </div>
</div>

JavaScript

$('.menu .item .content').slideUp(0);

$('.menu h3').click(function(){
	var id = $(this).attr('data-id');
  if (!($('.menu .content[data-id='+id+']').hasClass('animating'))) {
  	$('.menu .content[data-id='+id+']').toggleClass('animating').stop().slideToggle(300, function() {
    	$(this).toggleClass('animating');
    });
  	$('.menu .content[data-id='+id+']').parent('.item').toggleClass('open');	
  }
});