【jQuely】slideToggle()メソッドをクリックしたものだけに使用したい。

やりたいこと

※文言はすべて「テキスト」に変更している状態です。
.MemberSlideArrowというクラスをクリックしたら、その下にある.MemberMessageというクラスをdisplay:noneの状態から表示状態にする。(アコーディオンメニューのようにびよーんと伸びて表示する感じです)

ということをやりたいです。

これ自体はできるのですが、.MemberSlideArrowというクラスをクリックすると.MemberSlideArrowというクラスがついている箇所全てが表示されてしまうので、クリックした.MemberSlideArrowの下にあるものだけを表示したいです。
今回はSwiperというスライドショーのライブラリを利用しています。ひとつひとつのスライドショーはswiper-slideというクラス名で定義されています。
HTMLコードの中には２つしかないですが、実際にはこの下にさらに10個ほどスライドショーがありあます。

固有のidやクラス名を追加してやってみましたが、特に変わりがありませんでした。
添付画像は人の名前等が入ってしまっているため、該当箇所のみをスクリーンショットしております。

よろしくお願い申し上げます。

  $(function(){
    $(function(){
      $(".MemberSlideArrow").on("click", function() {
        $(this).next().slideToggle();
      });
    });
  });

// スライドショーの挙動
const swiperVoice = new Swiper('.swiperVoice', {
  slidesPerView: 'auto',
  loop: true,
  grabCursor: true,
  spaceBetween: 8,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
コード

  <section class="secVoice secScrollPoint" id="line-Voice">
    <div class="commonInner">

      <div class="commonTitleBlock">
        <h2 class="secCommonTitle">テキストテキストテキスト</h2>
        <p class="secCommonEnTitle">Voice</p>
      </div>

      <!-- Slider main container -->
      <div class="swiper swiperVoice">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">

          <div class="swiper-slide">
            <div class="slideInner">

              <div class="VoiceMember">
                <img src="<?php echo get_template_directory_uri(); ?>/img/VoiceMember/memberishii.png" alt="テキストテキスト">
                <div>
                  <h3>
テキストテキストテキストテキストテキストテキストテキストテキスト
                  </h3>

                  <div class="MemberJob">
テキストテキストテキストテキストテキストテキストテキストテキスト
                  </div>

                  <div class="MemberHistory">
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
                  </div>

                </div>
              </div>
              
              <div class="spview MemberSlideArrow"><img src="<?php echo get_template_directory_uri(); ?>/img/svg/questionArrow.svg" alt=""></div>
              <div class="MemberMessage">
                <p class="messageMargin">
テキストテキストテキストテキストテキストテキストテキスト
                </p>

                <p>
テキストテキストテキストテキストテキストテキストテキストテキスト
                </p>
              </div>

            </div>
          </div>


          <div class="swiper-slide">
            <div class="slideInner">

              <div class="VoiceMember">
                <img src="<?php echo get_template_directory_uri(); ?>/img/VoiceMember/membersakai.png" alt="テキストテキストテキスト">
                <div>
                  <h3>
テキストテキストテキストテキストテキストテキストテキストテキスト
                  </h3>

                  <div class="MemberJob"> 
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                  </div>

                  <div class="MemberHistory">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                  </div>

                </div>
              </div>

              <div class="spview MemberSlideArrow"><img src="<?php echo get_template_directory_uri(); ?>/img/svg/questionArrow.svg" alt=""></div>

              <div class="MemberMessage">
                <p class="messageMargin">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                </p>

                <p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                </p>
              </div>

            </div>
          </div>
コード

css 実際はsassで書いております。

.secVoice {
  background-color: #EFEEEB;
}

.secVoice .commonInner {
  width: 100%;
}

.secVoice .commonInner .commonTitleBlock {
  width: 1000px;
  margin: 0 auto 64px;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper {
  width: 1000px;
  margin: 0 auto;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide {
  width: 660px;
  height: 578px;
  background-color: #fff;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner {
  padding: 48px 48px 0px 48px;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember img {
  display: block;
  width: 248px;
  height: 248px;
  -o-object-fit: cover;
     object-fit: cover;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div {
  width: 296px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div h3 {
  font-size: 1.8rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div .MemberJob {
  font-size: 1.4rem;
  line-height: 1.7;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div .MemberHistory {
  font-size: 1.3rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberMessage {
  margin-top: 28px;
  letter-spacing: 0.01em;
}

.secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberMessage .messageMargin {
  margin-bottom: 28px;
}
@media screen and (max-width: 640px) {
  .secVoice .commonInner .commonTitleBlock {
    width: 80%;
    margin: 0 auto 64px;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper {
    width: 80%;
    margin: 0 auto;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide {
    width: 100%;
    height: auto;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner {
    padding: 24px 24px 40px;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember img {
    width: 100%;
    height: auto;
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div {
    width: 100%;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div h3 {
    font-size: 1.8rem;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div .MemberJob {
    font-size: 1.4rem;
    margin-bottom: 24px;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div .MemberHistory {
    font-size: 1.3rem;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberSlideArrow {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    bottom: 0px;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberSlideArrow img {
    display: block;
    width: 22px;
    height: 22px;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberMessage {
    display: none;
    font-size: 1.4rem;
  }
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberMessage .messageMargin {
    margin-bottom: 24px;
  }
}

Lhankor_Mhy

2021/11/11 06:23

ご提示のコードを試してみましたが、 .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberSlideArrow が絶対配置されており、祖先に包含ブロックがないことから、全ての .MemberSlideArrow が重なって表示されています。これは、ご提示のコードが不足しているのではないですか？それとも、実際のコード通りですか？

退会済みユーザー

2021/11/11 11:49

Lhankor_Mhy様ご指摘いただきありがとうございます。 cssのコードとswiperの振る舞いのコードを追加いたしました。 cssに関しては該当のセクション全体のコードになります。メディアクエリ内で定義している箇所が該当するかと思います。

Lhankor_Mhy

2021/11/12 00:55

ご提示のコードを試してみましたが、「.MemberSlideArrowというクラスがついている箇所全てが表示されてしまう」という問題が再現しませんでした。クリックした要素に対応する要素だけがスライドインしています。ご提示いただいていない部分に原因があるか、私が問題の共有をできていないのだろうと思います。もう少し詳しく書いていただけますか？

退会済みユーザー

2021/11/16 03:18

本当ですか？明らかに、クリックした際にクリックした際に左右に配置されたカードも伸び縮みをおこしてしまっています。 Lhankor_Mhy様の環境では、クリックしたものだけが伸び縮み(slideToggle)をしているのでしょか。

Lhankor_Mhy

2021/11/16 03:24

もうテストしたコードを捨ててしまいましたので現在は確認できませんが、私の記憶ではおっしゃるとおりです。