Javascript 当另一个打开时关闭手风琴面板

我在一个手风琴小组工作。它们都很好地打开，但我不知道如何在打开另一个元素时关闭它们

以下是我在代码方面的工作：

<div class="container">
  <div class="row">
    <div id="trickslist">
      <ul>
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <div>
              <h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
            </div>
          </a>
          <div class="detail">

          </div>
        </li>           
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
          </a>
          <div class="detail">

          </div>
        </li>
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
          </a>
          <div class="detail">

          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

---

我想这是在我的剧本里，但我并不是100%知道我做错了什么

从你的小提琴中，我看不到任何东西正在扩展，但有一个简单的技巧可以实现这一功能：单击“全部隐藏”，然后只显示该特定部分

$(".expand").click(function(){
    $(".detail").collaps();
    $(this).parent().find(".detail").expand();
});

---

我更新了你的小提琴，希望能解决你的问题=） 这是jQuery。查看

[已编辑]

---

在“.expand”元素单击事件中，所有手风琴将返回其初始状态，关闭并在右侧加上加号。仅当手风琴关闭时，手风琴的详细信息部分才会显示，以防止打开时单击时隐藏和显示。如果关闭手风琴，则会显示“详细信息”部分，加号将变为减号。

使用已具备此功能的库，可节省大量时间、悲伤和维护。jqueryui和kendoui都经过了尝试和测试，已经被世界各地的开发人员使用。其他人已经解决了问题。聪明点！（我也不为他们工作。）

---

请看，这篇文章可能会对您的问题有所帮助。不幸的是，似乎没有解决这个问题。其他小组仍然开放。我放了一把小提琴来展示我所拥有的：请解释一下你做了什么，以便我们其他人都能理解：-）这很有效。我甚至没有想过使用：可见。谢谢你！

$(".expand").click(function(){
    $(".detail").collaps();
    $(this).parent().find(".detail").expand();
});

$(".expand").on("click", function () {
    $(".right-arrow").text("+");
    $(".detail:visible").slideUp();
    if(!$(this).next().is(":visible")){

        $(this).next().slideDown(200);
        $(this).find(".right-arrow").text("-");
    }
});