【jQuery】矢印付きアコーディオンメニュー3選【コピペOK】

jQuery(function ($) {

$('.js-accordion-title').on('click', function () {
  /*クリックでコンテンツを開閉*/
  $(this).next().slideToggle(200);
  /*矢印の向きを変更*/
  $(this).toggleClass('open');
});

});

/*クリックでコンテンツを開閉*/
$(this).next().slideToggle(200);

/*矢印の向きを変更*/
$(this).toggleClass('open', 200);

$(function () {
  //中のコンテンツを隠す
  $(".accordion-content").css("display", "none");
  //タイトルがクリックされたら
  $(".js-accordion-title").click(function () {
    //クリックしたjs-accordion-title以外の全てのopenを取る
    $(".js-accordion-title").not(this).removeClass("open");
    //クリックされたtitle以外のcontentを閉じる
    $(".js-accordion-title").not(this).next().slideUp(300);
    //thisにopenクラスを付与
    $(this).toggleClass("open");
    //thisのcontentを展開、開いていれば閉じる
    $(this).next().slideToggle(300);
  });
});

//中のコンテンツを隠す
$(".accordion-content").css("display", "none");

$(".js-accordion-title").click(function () {
  //クリックしたaccordion-title以外の全てのopenを取る
  $(".js-accordion-title").not(this).removeClass("open");

//クリックされたtitle以外のcontentを閉じる
$(".js-accordion-title").not(this).next().slideUp(300);

$(".js-accordion-title").not(this)

.next().slideUp(300);

//thisにopenクラスを付与
$(this).toggleClass("open");

//thisのcontentを展開、開いていれば閉じる
$(this).next().slideToggle(300);

// 下記のように続けて記載することも可能！
$(function () {
   $(".accordion-content").css("display", "none");
   $(".js-accordion-title").click(function () {
     $(".js-accordion-title").not(this).removeClass("open").next().slideUp(300);
     $(this).toggleClass("open").next().slideToggle(300);
   });
 });

// 最初のコンテンツ以外は非表示
$(".accordion-content:not(:first-of-type)").css("display", "none");
// 矢印の向きを変えておく
$(".accordion-title:first-of-type").addClass("open");

// 最初のコンテンツ以外は非表示
$(".accordion-content:not(:first-of-type)").css("display", "none");

// 矢印の向きを変えておく
$(".accordion-title:first-of-type").addClass("open");

.accordion-title{
  position: relative;
}

.accordion-title:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.accordion-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

.accordion-title:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f106';
  font-weight: 900;
}

.accordion-title.open:after {
  content: '\f107';
}

.accordion-container .content-entry h4{
  position: relative;
}

.accordion-container .content-entry h4:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  /*縦線*/
  width: 15px;
  height: 2px;
  background: #fff;
  transition: all .2s ease-in-out;
}

.accordion-container .content-entry h4:before{
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 15px;
  height: 2px;
  /*横線に*/
  transform: rotate(90deg);
  background: #fff;
  transition: all .3s ease-in-out;
}

.accordion-container .content-entry.open h4:before{
  transform: rotate(180deg);
}
.accordion-container .content-entry.open h4:after{
  opacity: 0;
}

.accordion-container .accordion-title {
  position: relative;
}

.accordion-container .accordion-title::after {
  content: "";
  position: absolute;
  top: 25px;
  right: 25px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #fff;
}
.accordion-container .accordion-title.open::after {
  content: "";
  position: absolute;
  top: 15px;
  border: 8px solid transparent;
  border-bottom-color: #fff;
}