سلام. وقتتون بخیر
این کد رو بررسی بفرمایید:

    <ul class="accardion">
      <li>
        <div>Test 1</div>
        <ul>
          <li><a href="">list item</a></li>
          <li><a href="">list item</a></li>
          <li><a href="">list item</a></li>
        </ul>
      </li>
      <li>
        <div>Test 2</div>
        <ul>
          <li><a href="">list item</a></li>
          <li><a href="">list item</a></li>
          <li><a href="">list item</a></li>
        </ul>
      </li>
      <li>
        <div>Test 3</div>
        <ul>
          <li><a href="">list item</a></li>
          <li><a href="">list item</a></li>
          <li><a href="">list item</a></li>
        </ul>
      </li>
    </ul>

----

*,
body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.accardion li {
  cursor: pointer;
}
.accardion div {
  background: hotpink;
  color: white;
  border-bottom: 1px solid #efefef;
  padding: 10px;
}
.accardion ul {
  background: rgb(255, 228, 242);
  display: none;
}
.accardion ul li {
  padding: 6px 0;
}
.accardion ul li a {
  color: rgb(44, 41, 41);
}

----

$(document).ready(function () {
  $(".accardion > li > div").click(function () {
    if ($(this).next().is(":hidden")) {
      $(".accardion ul").slideUp();
    }
    $(this).next().slideToggle();
  });
});