How to make nav list-menu collapsible. Find screenshot and Code

How do I make nav-list expandable? Find screenshot one and two.

Choose a Sub-Category
{{ item.label }}
Products
        <ion-item ng-repeat="product in products.category.products.item" ng-click="getProductView(product.entity_id)" class="item-thumbnail-left custom-thumbnail">
           <img src="{{product.icon.__text}}" class="padding">
           <h3>{{ product.name }}</h3>
           <p>{{ product.short_description }}</p>
           <strike ng-if="product.price._special">
              <h4 class="assertive">{{product.price._regular}}</h4>
           </strike>
           <h4 ng-if="!product.price._special" class="assertive">{{product.price._regular}}</h4>
           <h4 class="calm">{{product.price._special}}</h4>
        </ion-item>
     
     <button class="button button-block button-clear button-dark" ng-hide="has_more_items">No More Products</button>
     <button class="button button-block button-clear" ng-show="has_more_items">
        <ion-spinner class="spinner-calm" icon="spiral"></ion-spinner>
     </button>
  </ion-list>
  <ion-infinite-scroll
     ng-if="has_more_items"
     icon="ion-loading-c"
     spinner="spiral"
     on-infinite="loadMore()"
     distance="1%">
  </ion-infinite-scroll>