Ограничить движение в одном

при клике в "аккордеоне" jQuery

jQuery(document).ready(function() {
  jQuery('#accordeon .head-acc').on('click', my_func);
});

function my_func() {

  jQuery('#accordeon .hidden-acc').not(jQuery(this).next());
  jQuery(this).next().toggleClass("active-acc");


  jQuery('.ar-acc').toggleClass("triger");

}

li.acc {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 1px;
  position: relative;
}

.hidden-acc {
  width: 90%;
  padding: 0;
  margin: auto;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.2s linear;
}

.active-acc {
  padding: 10px;
  visibility: visible;
  height: auto;
  overflow: none;
  opacity: 1;
  margin: 15px 0;
  background: #fff;
  width: 100%;
  padding: 35px 25px 25px 25px;
  border-radius: 5px;
}

ul#accordeon li::before {
  content: none;
}

.head-acc {
  position: relative;
  padding: 15px 25px 3px 25px;
}

ul#accordeon li {
  border-radius: 25px;
  padding: 0 4px 12px 4px;
  color: #000;
  background: #FFD92D;
  font-weight: bold;
  cursor: pointer;
  font-size: 18px;
}

ul#accordeon {
  margin: 40px 0;
}

.ar-acc {
  position: absolute;
  top: 60%;
  right: 30px;
  width: 22px;
  height: 22px;
  transform: translate(0, -50%);
  background: url(/) no-repeat 0 0;
  background-size: cover;
  transition: 0.5s;
}

.ar-acc.triger {
  transform: translate(0, -50%) rotate(180deg);
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul id="accordeon">
  <li>
    <div class="head-acc">
      1 пункт
      <div class="ar-acc">X</div>
    </div>
    <div class="hidden-acc">
      текст текст
    </div>
  </li>
  <li>
    <div class="head-acc">
      2 пункт
      <div class="ar-acc">X</div>
    </div>
    <div class="hidden-acc">
      текст текст
    </div>
  </li>


</ul>