title: Why does my accordion list keep closing?
body: <p>I've created a side menu that contains accordion list. When I load the page, the accordion list has one section open because it's coded to be active on page load. However if I attempt to open another section... it opens the section but then closes straight away. Can someone tell me where I'm going wrong?</p>
  
  <p><strong>List code:</strong></p>
  
  <pre><code>&lt;ion-content class="has-header" id="accordian"scroll="false" ng-controller="MainCtrl"&gt;
    &lt;ul&gt;
      &lt;li class="active"&gt;
        &lt;h3&gt;&lt;span class="icon-dashboard"&gt;&lt;/span&gt;Group 1&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li ng-repeat="card in cards"&gt;&lt;a href="#"&gt;{{ card.title }}&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;!-- we will keep this LI open by default --&gt;
      &lt;li&gt;
        &lt;h3&gt;&lt;span class="icon-tasks"&gt;&lt;/span&gt;Group 2&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li ng-repeat="card in cards"&gt;&lt;a href="#"&gt;{{ card.title }}&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;h3&gt;&lt;span class="icon-calendar"&gt;&lt;/span&gt;Group 3&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li ng-repeat="card in cards"&gt;&lt;a href="#"&gt;{{ card.title }}&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(document).ready(function(){
    $("#accordian h3").click(function(){
      //slide up all the link lists
      $("#accordian ul ul").slideUp();
      //slide down the link list below the h3 clicked - only if its closed
      if(!$(this).next().is(":visible"))
      {
        $(this).next().slideDown();
      }
    })
  })
  </code></pre>