title: Using Angular 2 animations to create accordion navigation
body: <p>I'm trying to create a collapsible accordion menu in Angular 2. At the moment my code allows the sub-menus to expand and retract using Angular 2 animations. The problem is that I need a certain sub-menu to expand when the parent is clicked on. </p>
  
  <p>My current set up looks like this:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;span (click)="toggleSubMenu()"&gt;
        List Item 1
      &lt;/span&gt;
      &lt;ul [@subMenuToggle]="subMenuState" class="sub-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;New&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Edit&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Remove&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;span (click)="toggleSubMenu()"&gt;
        List Item 2
      &lt;/span&gt;
      &lt;ul [@subMenuToggle]="subMenuState" class="sub-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;New&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Edit&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Remove&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p>Right now when I click on one of the main menu items (List Item 1 or 2) then both sub-menus expand. (I only want the corresponding child sub-menu to expand)</p>
  
  <p>My current animation trigger looks like this: </p>
  
  <pre><code>trigger('subMenuToggle',[
    state('subMenuSelected', style({opacity: '1', height: '*'})),
    state('subMenuDeselected', style({opacity: '0', height: '0px', overflow: 'hidden'})),
    transition('subMenuSelected &lt;=&gt; subMenuDeselected', [
      animate('150ms ease-out')
    ])
  ])
  </code></pre>
  
  <p>and the toggleSubMenu() method changes the state:</p>
  
  <pre><code> export class NavSidebarComponent {
  
    subMenuState: string = 'subMenuDeselected';
  
  
    toggleSubMenu() {
      this.subMenuState = (this.subMenuState === 'subMenuSelected' ? 'subMenuDeselected' : 'subMenuSelected');
    }
  
  }
  </code></pre>
  
  <p>Is there a good way to use the toggleSubMenu() method to figure out which menu item is clicked on, then expand the corresponding sub-menu? or will I have to create a toggle method for each parent menu item separately?</p>
  
  <p>Thanks</p>