Как я могу анимировать каждый элемент отдельно по клику?

Question

Мой текущий код анимирует все экземпляры класса ".movinglinecontainer". Я хотел бы, чтобы мой код запускался только для экземпляра, который был нажат.

Я пытался реализовать $ (this), но я не мог заставить его работать правильно.

function ani() {
  var loadingbar = jQuery('.movinglinecontainer');
  if (loadingbar.hasClass('movingline')) {
    loadingbar.removeClass('movingline').addClass('movinglinereverse');
  } else if (loadingbar.hasClass('movinglinereverse')) {
    loadingbar.removeClass('movinglinereverse').addClass('movingline');
  } else {
    loadingbar.addClass('movingline');
  }
};
jQuery(document).ready(function() {
  jQuery('.movinglinecontainer').on("click", function() {
    ani();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">Frequently Asked Questions</div>
<div class="faq-accordion" data-accordion-group="">
  <div data-accordion="" class="faq-main" onclick="ani();">
    <div data-control="" class="faq-title">
      <h4>Question goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden; transition: max-height 300ms ease 0s;">
      <div class="faq-content">
        <p class="answer-content">Answer goes here</p>
      </div>
    </div>
  </div>
  <div data-accordion="" class="faq-main" onclick="ani()">
    <div data-control="" class="faq-title">
      <h4>Question 2 goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden;">
      <div class="faq-content">
        <p class="answer-content">Answer 2 goes here!</p>
      </div>
    </div>
  </div>

Answer 1

Вы можете попробовать передать $(this) в качестве аргумента вашей функции:

function ani(loadingbar) {
  if(loadingbar) {
    if (loadingbar.hasClass('movingline')) {
      loadingbar.removeClass('movingline').addClass('movinglinereverse');
    } else if (loadingbar.hasClass('movinglinereverse')) {
      loadingbar.removeClass('movinglinereverse').addClass('movingline');
    } else {
      loadingbar.addClass('movingline');
    }
  }
  
};

jQuery(document).ready(function() {
  jQuery('.movinglinecontainer').on("click", function() {
    ani($(this));
  });
});

.movinglinecontainer {
  height: 20px;
  transition: width 3s linear;
  background: aqua; 
  width:30%
}

.movingline {
  width: 100%
}

.movinglinereverse {
  width: 30%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">Frequently Asked Questions</div>
<div class="faq-accordion" data-accordion-group="">
  <div data-accordion="" class="faq-main" onclick="ani();">
    <div data-control="" class="faq-title">
      <h4>Question goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden; transition: max-height 300ms ease 0s;">
      <div class="faq-content">
        <p class="answer-content">Answer goes here</p>
      </div>
    </div>
  </div>
  <div data-accordion="" class="faq-main" onclick="ani()">
    <div data-control="" class="faq-title">
      <h4>Question 2 goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden;">
      <div class="faq-content">
        <p class="answer-content">Answer 2 goes here!</p>
      </div>
    </div>
  </div>