How to use ng-click + ng-show/hide correctly?

Question

Angular

There is a DOM (below). I need to implement something like a question-answer, but the answer opens when you click on the question and hides either when you click on the next question. Now the problem is that when you click on a question, all the answers are opened at once, but only for the current question.

<div class="options">		
    <div ng-click="showOptions=!showOptions" class="options-title">Вопрос +</div>
    <div ng-show="showOptions" class="options-content">
      <ul>
        <li><span>ответ</span><span class="icon-edit"></span></li>
        <li><span>ответ</span><span class="icon-edit"></span></li>
      </ul>
    </div>
    <div ng-click="showOptions=!showOptions" class="options-title">Вопрос +</div>
    <div ng-show="showOptions" class="options-content">
      <ul>
        <li><span>ответ</span><span class="icon-edit"></span></li>
        <li><span>ответ</span><span class="icon-edit"></span></li>
      </ul>
    </div>
  </div>

And the second question. Is it possible to somehow animate to be something like jq slideToggle()?

Answer 1

Question-answer pairs are formatted in ng-repeat. By clicking, you change the parameter inside each question, for example, opened. For smoothness, you can use ng-class. Add a class with CSS transition to an open element

Answer 2

Set some unique key to open the elements.
For example:

<div ng-click="showOptions1=!showOptions1" class="options-title">Вопрос +</div>
    <div ng-show="showOptions1" class="options-content">
      <ul>
        <li><span>ответ</span><span class="icon-edit"></span></li>
        <li><span>ответ</span><span class="icon-edit"></span></li>
      </ul>
    </div>