Collapsible Sidebar Elements in EmberJS

I have a list I want to function as a sidebar, which consists of music genres, and sub-genres.

<ul>
  
    <li>
      
        
      
      <ul>
        
          <li></li>
        
      </ul>
    </li>
  
</ul>

My difficulty is figuring out how to have only the selected genre display its sub-genres. I have a bit of css which works if I can somehow add the 'active' class to the appropriate genre.

li ul {
  display: none;
}

li.active ul {
  display: block;
}