JSFiddle - React, Tailwind, and code Playground

HTML

<!-- slideToggle -->
<div id="sample01">
  <dl id="acMenu">
    <dt>アコーディオンメニュー</dt>
    <dd>openメニュー</dd>
    <dt>アコーディオンメニュー</dt>
    <dd>openメニュー</dd>
    <dt>アコーディオンメニュー</dt>
    <dd>openメニュー</dd>
  </dl>
</div>
<!-- fadeToggle -->
<div id="sample02">
  <ul id="tabMenu" class="clearfix">
    <li><a href="#tabBox1">メニュー1</a></li>
    <li><a href="#tabBox2">メニュー2</a></li>
    <li><a href="#tabBox3">メニュー3</a></li>
  </ul>
  <div id="tabBoxes">
    <div id="tabBox1">ボックス1</div>
    <div id="tabBox2">ボックス2</div>
    <div id="tabBox3">ボックス3</div>
  </div>
</div>
<!-- toggleClass -->
<div>
  <dl id="acMenu2">
    <dt>アコーディオンメニュー</dt>
    <dd>openメニュー</dd>
    <dt>アコーディオンメニュー</dt>
    <dd>openメニュー</dd>
    <dt>アコーディオンメニュー</dt>
    <dd>openメニュー</dd>
  </dl>
</div>

CSS

#acMenu dt {
  display: block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: #5bc0de 1px solid;
  cursor: pointer;
}

#acMenu dd {
  background: #d9534f;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: #5bc0de 1px solid;
  display: none;
}

#tabMenu ul {
  width: 600px;
}

#tabMenu li {
  float: left;
}

#tabMenu li a {
  display: block;
  width: 198px;
  height: 48px;
  line-height: 50px;
  text-align: center;
  border: #5bc0de 1px solid;
}

#tabBox1,
#tabBox2,
#tabBox3 {
  width: 598px;
  height: 300px;
  border: #5bc0de 1px solid;
}

#tabBox1 {
  background: #5bc0de;
}

#tabBox2 {
  background: #d9534f;
  display: none;
}

#tabBox3 {
  background: #115a71;
  display: none;
}

#acMenu2 dt {
  display: block;
  width: 185px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: #5bc0de 1px solid;
  cursor: pointer;
  padding-right: 15px;
}

#acMenu2 dd {
  background: #d9534f;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: #5bc0de 1px solid;
  display: none;
}

#acMenu2 dt.active {}

div {
  padding-left: 20px;
  height: 500px;
}

JavaScript

$(function() {
  $("#acMenu2 dt").on("click", function() {
    $(this).next().slideToggle();
    $(this).toggleClass("active");
  });
 /*  $("#acMenu dt").on("click", function() {
    $(this).next().slideToggle();
  }); */
  $("#tabMenu li a").on("click", function() {
    $("#tabBoxes div").hide();
    $($(this).attr("href")).fadeToggle();
    return false;
  });
});