jQuery slideToggle 下面的第一类

Question

这是我的 HTML：

<div class="row header collapse">
     Content 1
     <i class="fas fa-chevron-circle-up" ></i>
</div>

<div class="instructions-container">
     <div></div>
     <div></div>
</div>

<div class="row header collapse">
     Content 2
     <i class="fas fa-chevron-circle-up" ></i>
</div>

<div class="instructions-container">
     <div></div>
     <div></div>
</div>

基本上，我在一个页面上有多个此设置的实例，但是点击.collapse，我想slideToggle ONLY.instructions-container，它位于单击的折叠按钮正下方.

我还想在点击时切换.fa-chevron-cirle-up 旋转 180 度，但同样，只有这个点击了。

这是当前的 jQuery：

$(document).ready(function () {

     $('.collapse').click(function () {
          $(this).find('.instructions-container').slideToggle();
     });
});

Answer 1

我用下面的代码弄清楚了前半部分：

$(document).ready(function () {

   $('.collapse').click(function () {
      $(this).next().slideToggle();
   });

});