title: How to slide up and slide down in AngularJS?
body: <p>I am trying to make a simple toggle example in AngularJS. I am facing one issue I need to show and hide with some animation like slide up and slide down. I have <code>search</code> button on header on click I show search <code>div</code> it is working in my plunker. My issue is to do animation...</p>
  
  <p>Secondly I need to add <code>z-index</code> because it generates new layer. When I click search button <strong>"my name "</strong>  come down when search bar is open. Why?</p>
  
  <pre><code>&lt;ion-view&gt;
  &lt;ion-header-bar align-title="" class="bar-positive"&gt;
    &lt;div class="buttons"&gt;
    &lt;i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"&gt;&lt;/i&gt;
  
    &lt;/div&gt;
    &lt;h1 class="title"&gt;Title!&lt;/h1&gt;
    &lt;a class="button icon-right ion-chevron-right button-calm"&gt;&lt;/a&gt;
  &lt;/ion-header-bar&gt;
  &lt;div class="list list-inset searchclass" ng-show="isdiplay"&gt;
    &lt;label class="item item-input"&gt;
      &lt;img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0"&gt;
      &lt;input type="text" placeholder="Search"&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;ion-contend&gt;
    &lt;div style="margin-top:50px"&gt;
    my name
  &lt;/div&gt;
  &lt;/ion-contend&gt;
  
  &lt;/ion-view&gt;
  </code></pre>