【jQuery】アコーディオン基本パターン４種の作り方（CodePen解説）【初心者向け】

<div class="accordion_wrapper">
  <!--  アコーディオン１  -->
  <dl class="accordion">
   <dt class="accordion_header">タイトル</dt>
   <dd class="accordion_content">
     内容：ここに内容が入りますここに内容が入りますここに内容が入ります
    </dd>
  </dl>
  <!--  アコーディオン２  -->
  <dl class="accordion">
   <dt class="accordion_header">タイトル</dt>
   <dd class="accordion_content">
     内容：ここに内容が入りますここに内容が入りますここに内容が入ります
   </dd>
  </dl>
</div>

/* アコーディオンリスト全体を囲うタグ */
.accordion_wrapper{
  margin-top: 50px;
}
/* 個々のアコーディオンリストを囲うタグ */
.accordion{
  font-size: 20px;
  width: 80%;
  margin: 0 auto;
}
/* アコーディオンのタイトル・内容共通 */
.accordion_header,
.accordion_content{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 100%;
  font-weight: 400;
}
/* アコーディオンのタイトル */
.accordion_header {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  position: relative;
}
.accordion_header:nth-child(n + 1) {
  margin-top: 20px;
}
/* アコーディオンの内容 */
.accordion_content {
  display: none;
  background-color: #eee;
  color: #333;
}
/* アコーディオン横の回転する矢印 */
.accordion_header::after{
  position: absolute;
  display: block;
  content: '';
  top: 35%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(135deg);
  transform: rotate(135deg);
  transition: all .3s ease-in-out;
}
/* アコーディオンが開いたとき */
.accordion_header.open::after {
transform: rotate(-45deg);
top: 45%;
}

$(document).ready(function() {
　　　　// タイトルをクリックした場合
  $('.accordion_header').click(function() {
    // アコーディオン（内容）の開閉    
    $(this).next('.accordion_content').slideToggle(200);
    // タイトルにopenクラスを付与または削除して矢印回転
    $(this).toggleClass("open",200);
  });
});

/* アコーディオンリスト全体を囲うタグ */
.accordion_wrapper{
  margin-top: 50px;
}
/* 個々のアコーディオンリストを囲うタグ */
.accordion{
  font-size: 20px;
  width: 80%;
  margin: 0 auto;
}
/* アコーディオンのタイトル・内容共通 */
.accordion_header,
.accordion_content{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 100%;
  font-weight: 400;
}
/* アコーディオンのタイトル */
.accordion_header {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  position: relative;
}
/* アコーディオンの内容 */
.accordion_content {
  display: none;
  background-color: #eee;
  color: #333;
}
.accordion_header:nth-child(n + 1) {
  margin-top: 20px;
}
/* タイトル横のプラスマーク縦線 */
.accordion_header::before{
  position: absolute;
  content: '';
  top: 50%;
  right: 25px;
  width: 20px;
  height: 1px;
  background-color:#fff;
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
}
/* タイトル横のプラスマーク横線 */
.accordion_header::after{
  position: absolute;
  content: '';
  top: 50%;
  right: 25px;
  width: 20px;
  height: 1px;
  background-color:#fff;
  transition: all .3s ease-in-out;
}
/* アコーディオンが開いたとき縦線の変化 */
.accordion_header.open::before {
  transform: rotate(180deg);
}
/* アコーディオンが開いたとき横線の変化 */
.accordion_header.open::after {
  opacity:0;
}

$(document).ready(function() {
　　　　// タイトルをクリックした場合
  $('.accordion_header').click(function() {
    // クリックしていない他のタイトルにopenがついていたら剥奪  
    $(".accordion_header").not(this).removeClass("open");
    // クリックしていない他のタイトルアコーディオンを閉じる
    $(".accordion_header").not(this).next().slideUp(200);
    // タイトルにopenクラスを付与または剥奪してプラスマイナス可変
    $(this).toggleClass("open");
    $(this).next().slideToggle(200);
  });
});

$(document).ready(function() {
　　　　//はじめのアコーディオンにdisplay:block
  $(".accordion:first-of-type .accordion_content").css("display", "block");
  // はじめのアコーディオンを開いておく
  $(".accordion:first-of-type .accordion_header").addClass("open");
  // タイトルをクリックするとopenを付与または剥奪してアコーディオンを開閉
  $(".accordion_header").on("click", function () {
    $(this).next().slideToggle(200);
    $(this).toggleClass("open", 200);
  });
});