Earlier I asked [this question about setting a height back to 0 after toggling a class](https://stackoverflow.com/questions/21273063/setting-height-back-to-0-after-toggling-a-class/21273396?noredirect=1#comment32054937_21273396).

Whilst the answer was correct, it turned out my question was not so I'm back to rephrase and try and solve my problem.

* I have a navigation list and some items have a sub navigation list inside them
* Each item that has a sub navigation has a toggle arrow which you click
* I want the sub navigation `<ul>` to start with a height of 0, and when you click the toggle arrow I want to use jQuery to set that sub navigation's height to the calculated height of it's items

![enter image description here](https://i.stack.imgur.com/1X40K.png)

The HTML is like this:

```
<li class="slidedown">
  <a href="#">Parent Link</a>
  <!-- Dropdown arrow -->
  <span class="slidedown-toggle">
    <span class="caret"></span>
  </span>
  <!-- Submenu -->
  <ul class="nav nav-sub">
    <li>
      <a href="#">Child Menu Item 1</a>
    </li>
  </ul>
</li>

```

The answer to my previous question gave me this script:

```
$(function navCollapse() {

  var slidedownToggle = $('#global-nav .slidedown-toggle');

  slidedownToggle.click(function () {
    var slidedown = $(this).parent('.slidedown');
    var $li = $(this).closest('li');
    var subnav = $(this).siblings('.nav-sub');
    var subnavHeight = subnav.height();

    slidedown.toggleClass('open');

    if ($li.hasClass('open')) {
        subnav.height(0);
    } else {
        subnav.height(subnavHeight);
    }

  });

});

```

**BUT** I quickly realised that once the height had been set to 0, the script would continue to calculate it as 0 from then on, no matter how many times you click.
Which leaves me stuck and confused.

The old Bootstrap Collapse is pretty much what I want (only the height change). It sets the height via JavaScript and then uses CSS to do the transition. Although I'd prefer not to have my sub-menu have `display: none`.

Any ideas?

NOTE: I don't want to use JavaScript animations. I want to use CSS for that.
I also don't want to use the `max-height` solution to CSS only dropdowns. That is my fallback.

**[DEMO](http://jsbin.com/ozaPaFoM/2/edit)**