JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button01" class="button">ボタン(STOPなし)</div>
<div class="toggle">
<p>中身</p>
</div>
<div id="button02" class="button button02">ボタン（STOPあり）</div>
<div class="toggle">
<p>中身</p>
</div>

CSS

.button {
  display: block;
  width: 240px;
  height: 30px;
  line-height: 30px;
  background: #448aca;
  color: #fff;
  border-bottom: 5px solid #346a9b;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.toggle {
  display: none;
  margin-top: 30px;
  text-align: center;
  font-size: 16px;
  background: #fff;
  border: 1px dotted #ccc;
}
.button02 {
  margin-top: 40px;
}

JavaScript

$(function(){
  $("#button01").on("click",function(){
    $(this).next().slideToggle();
  });
  $("#button02").on("click",function(){
    $(this).next().stop().slideToggle();
  });
});