Angular 4 animations for selected ng for element

Question

I am trying to make a accordion with angular4 animation.Problem is when i click on one ul element everyelement is getting trigged and all is being shown/hidden.I am not able to track the particular clicked element.How can i track the cliked elemt and apply animation for that element only.

My code looks like :

<ul class="each-filter-desc">
      <!-- *Outer ngfor for acoordion-->
      <li class="each-filter-options" *ngFor='let tertiaryFilterCategory of tertiaryLevelData.groupBy.values; let k = index'>
        <p (click)="toggleOptionsHeight(k)" class="flex flex-start flex-align-center">

          <span class="filter-dropDdown-arrow" [class.openOptions]="openOptions === true"></span>{{tertiaryFilterCategory.name}}</p>
        <ul class="sub-filter-criteria" [@toggleHeight]="hightState">

          <!--  * below ngfor paints the accordion content(each accordion content is also coming from json)
          -->
          <li class="sub-filter-each flex flex-between" *ngFor='let tertiarySubValues of tertiaryFilterCategory.values; let l = index'>content for each accordion
          </li>
        </ul>
      </li>
    </ul>` 

Ts code :

    animations: [
    trigger("toggleHeight", [
      state(
        "inactive",
        style({
          height: "0",
          opacity: "0",
          visibility: "hidden"
        })
      ),
      state(
        "active",
        style({
          height: "*",
          opacity: "1",
          visibility: "visible"
        })
      ),
      transition("inactive => active", animate("200ms ease-in")),
      transition("active => inactive", animate("200ms ease-out"))
    ])]
      toggleOptionsHeight(index) {
    try {

      event.preventDefault();
      this.hightState == "inactive"
        ? (this.hightState = "active")
        : (this.hightState = "inactive");
    } catch (error) {
      this.logger.log("error", error);
    }
  }