Улучшение поведения ng-click/ng-show

Question

У меня есть ng-repeat, который перечисляет кучу заголовков, которые имеют ng-клики. Всякий раз, когда щелкают по одному из названий, он открывает разделенный раздел внизу, чтобы раскрыть больше деталей:

<div class="child" ng-repeat="item in c.stage track by $index">
    <div ng-click="showDetails(item)">
         {{title}}
    </div>
</div>


    <div ng-show="tasksDiv" ng-if="active_tasks.length>0" class="text-center tasksDiv">
        <h3>{{active_workflow}} Tasks:</h3>
        <ul style="list-style:none; padding-left:0; display:inline-block">
          <li ng-repeat="tasks in active_tasks track by $index" style="display:flex; align-items:center; padding-bottom:0.5rem;">
            <i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i>
            <a ng-if="tasks.url" href="{{tasks.url}}" target="_blank">{{tasks.short_description}}</a>
            <a ng-if="!tasks.url">{{tasks.short_description}}</a>
          </li>
        </ul>
      </div>

В моем клиентском скрипте у меня есть следующее:

$scope.tasksDiv = false;

    $scope.showDetails = function(item) {

            $scope.active_tasks = [];
            $scope.active_workflow = item.workflow_stage;
            for(var i =0; i<item.task.length; i++) {
        $scope.active_tasks.push(item.task[i]);
            }

            $scope.tasksDiv = !$scope.tasksDiv;
    };

В настоящее время, когда вы щелкаете по одному из заголовков, он открывает div, а если вы щелкаете по ЛЮБОМУ элементу, он закрывает div. В идеале, я хочу, чтобы щелчки открывали и закрывали соответствующий им div.

Например, если я нажму на элемент 1, он должен открыть div элемента 1. Если я затем щелкну пункт 6, он должен открыть div элемента 6; не закрыть пункт 1 див. Код $scope.tasksDiv =!$ Scope.tasksDiv; это то, что вызывает эту проблему, и я не уверен, как это исправить. Какие-либо предложения?

Кроме того, что я должен добавить в CSS, чтобы div'ы открывались с более плавным переходом?

Спасибо!