Why does my accordion list keep closing?

Question

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?

List code:

<ion-content class="has-header" id="accordian"scroll="false" ng-controller="MainCtrl">
  <ul>
    <li class="active">
      <h3><span class="icon-dashboard"></span>Group 1</h3>
      <ul>
        <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li>
      </ul>
    </li>
    <!-- we will keep this LI open by default -->
    <li>
      <h3><span class="icon-tasks"></span>Group 2</h3>
      <ul>
        <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li>
      </ul>
    </li>
    <li>
      <h3><span class="icon-calendar"></span>Group 3</h3>
      <ul>
        <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li>
      </ul>
    </li>
  </ul>

JS:

$(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();
    }
  })
})

Answer 1

You must wait until the execution of the slideUp function is completed (by default the duration is 400ms) before you test if the next element is visible or not.

$(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
      var $elemH3 = $(this);
      setTimeout(function() {
          if(!$elemH3.next().is(":visible"))
          {
              $elemH3.next().slideDown();
          }
      }, 401);

  })
})

You can use some CSS to do this easily see this example : http://jsfiddle.net/nx2LkoLd/ You hide all sections but not the active one :

css code

li.active ul {
    display:block;
}
li ul {
    display: none;
}

The js and html code still the same.

Hope it's clear and will help you resolve your problem.