<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="sample.js" type="text/javascript"></script>
    <title>jQuery</title>
  </head>
  <body>
    <!-- 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>
  </body>
#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:#5bc0de;
  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;
}
$(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;
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.