jQueryで矢印付きアコーディオンメニューを作る方法【コピペOK！】

.accordion-content {
  display: none;
}

$(function () {
  $(".js-accordion-title").on("click", function () {
    $(this).next().slideToggle(300);
    $(this).toggleClass("open", 300);
  });
});

$(function () {
  // タイトルをクリックすると
  $(".js-accordion-title").on("click", function () {
    // クリックした次の要素(コンテンツ)を開閉
    $(this).next().slideToggle(300);
    // タイトルにopenクラスを付け外しして矢印の向きを変更
    $(this).toggleClass("open", 300);
  });
});

.accordion-title {
  position: relative;
}
.accordion-title::after {
  border-right: solid 2px #fff; // 矢印の色
  border-top: solid 2px #fff; // 矢印の色
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 25px;
  top: 38%;
  transform: rotate(135deg); // 最初の矢印は下向き
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 8px;
}
.accordion-title.open::after {
  top: 45%; // 矢印の位置を少し変える
  transform: rotate(-45deg); // 矢印を上向きに変える
}

.accordion-title {
  position: relative;
}
/* 縦線 */
.accordion-title::before {
  background: #fff; /* 線の色 */
  content: "";
  height: 2px; /* 線の太さ */
  position: absolute;
  right: 25px;
  top: 50%; /* 線の位置を縦中央に */
  transform: rotate(90deg); /* 線を縦に */
  transition: transform .3s ease-in-out;
  width: 15px; /* 線の幅 */
}
/* 横線 */
.accordion-title::after {
  background: #fff; /* 線の色 */
  content: "";
  height: 2px; /* 線の太さ */
  position: absolute;
  right: 25px;
  top: 50%; /* 線の位置を縦中央に */
  transition: opacity .3s ease-in-out;
  width: 15px; /* 線の幅 */
}
/* 縦線(クリック後) */
.accordion-title.open::before {
  transform: rotate(180deg);
}
/* 横線(クリック後) */
.accordion-title.open::after {
  opacity: 0;
}

$(function () {
  $(".js-accordion-title").on("click", function () {
    $(".js-accordion-title").not(this).removeClass("open");
    $(".js-accordion-title").not(this).next().slideUp(300);
    $(this).toggleClass("open");
    $(this).next().slideToggle(300);
  });
});

$(function () {
  // タイトルをクリックすると
  $(".js-accordion-title").on("click", function () {
    // クリックしたタイトル以外のopenクラスを外す(－から＋にする)
    $(".js-accordion-title").not(this).removeClass("open");
    // クリックしたタイトル以外のコンテンツを閉じる
    $(".js-accordion-title").not(this).next().slideUp(300);
    // クリックしたタイトルにopenクラスを付け外しして＋と－を切り替える
    $(this).toggleClass("open");
    // クリックしたタイトルの次の要素(コンテンツ)を開閉
    $(this).next().slideToggle(300);
  });
});

$(function () {
  $(".accordion-item:first-of-type .accordion-content").css("display", "block");
  $(".accordion-item:first-of-type .js-accordion-title").addClass("open");
  $(".js-accordion-title").on("click", function () {
    $(this).next().slideToggle(300);
    $(this).toggleClass("open", 300);
  });
});

$(function () {
  // 最初のコンテンツは表示
  $(".accordion-item:first-of-type .accordion-content").css("display", "block");
  // 最初の矢印は開いた時の状態に
  $(".accordion-item:first-of-type .js-accordion-title").addClass("open");
  // タイトルをクリックすると
  $(".js-accordion-title").on("click", function () {
    // クリックした次の要素を開閉
    $(this).next().slideToggle(300);
    // タイトルにopenクラスを付け外しして矢印の向きを変更
    $(this).toggleClass("open", 300);
  });
});