Javascript 在手风琴上旋转单个V形

我希望在单击相应的标题时旋转一个V形。到现在为止，所有的V形都会旋转。我想我必须指定哪个雪佛龙，但我不知道怎么做。我在ASP.NETMVC5中工作，我使用razor视图浏览列表

索引

手风琴和雪佛龙的JS

从浏览器：

项目
凯威伯格
涂鸦


项目
凯威伯格
涂鸦

Somthindsyvgds

$（文档）.ready（函数（）{
$（“.accordion desc”）.fadeOut（0）；
$（“.accordion”）。单击（函数（）{
$（“.accordion desc”）.not（$（this.next（））.slideUp（'fast'）；
$（this.next（）.slideToggle（400）；
});
});
$（“.accordion”）。单击（函数（）{
$（“.accordion”）.not（this.find（“.rotate”）.removeClass（“down”）；
$（this.find（“.rotate”）.toggleClass（“down”）；
});
。旋转{
-moz过渡：所有0.1s线性；
-webkit转换：所有0.1s线性；
过渡：所有0.1s线性；
}
.向下旋转{
-moz变换：旋转（90度）；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
.手风琴{
背景：蓝色；
}
.fa，h4{
颜色：白色；
}

项目
凯威伯格
涂鸦


项目
凯威伯格
涂鸦

Somthindsyvgds

$（this）.find（“.rotate”）.toggleClass（'down'）
更新了来自browserIt works的conent的问题，但在我的问题中忘了提到，当我单击另一个标题时，我希望已经面朝下的V形出现。我怎么能做到这一点？哦，另一件事。现在，当我点击打开的同一标题时，V形符号不再向上。进行了另一次调整，我已经包含了一个片段。
@{
    foreach (var item in Model)
    {
        <div class="accordion">
            <a href="#"><h4>@item.Title</h4><i class="fa fa-chevron-right rotate"></i></a>
        </div>
        <div class="accordion-desc">
            <h3>@Resource.AccordionProjectLead</h3>
            <h4>Kay Wiberg</h4>
            <h3>@Resource.AccordionDescription</h3>
            <p>
            @item.Description
            <p> 
            <div class ="link">
                <a href="@item.Url">@Resource.AccordionGoTo</a>
            </div>
        </div>
    }
}

.rotate {
  -moz-transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.rotate.down {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

$(document).ready(function() {
  $(".accordion-desc").fadeOut(0);
  $(".accordion").click(function() {
    $(".accordion-desc").not($(this).next()).slideUp('fast');
    $(this).next().slideToggle(400);
  });
});

$(".accordion").click(function() {
  $(".rotate").toggleClass("down");
});

<div class="container">
  <div class="accordion">
    <a href="#">
      <h4>Test Site</h4><i class="fa fa-chevron-right rotate down"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>

    </p>      
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>
  <div class="accordion">
    <a href="#">
      <h4>Test site 2</h4><i class="fa fa-chevron-right rotate"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>
      Somthindsyvgds
    </p>
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>

</div>