Question: I am working with this example:
<http://codepen.io/anon/pen/gBCJK/>

The problem is that when I have a category expanded, and I click on another one, I want all other expanded categories to retract, leaving only the last one clicked open.
Also if you click a subcategory the menu retracts.

Any ideas on how to fix it?

Answer: 
You could reset the CSS `max-height: 33px;` rule on all but the last clicked item as follows:

```
$('.item').click(function(){
    $('.item').not(this).css('max-height', '33px');
    $(this).css('max-height','429px')
});

```

This also ensures the menu doesn't collapse when you click a subcategory, because although you're still enacting a click event on the `.item` div, the max-height won't be removed from the currently 'active' one.
I think this toggling would be best handled using a class (for example 'open') to control the styling changes, and show the state.

You can see in [this fiddle](http://codepen.io/mstrutt/pen/hqnwK) my changes, but here is a summary. The new CSS class for the "open" item.

```
#accordion .item.open {
    max-height: 429px;
}

```

and the new click event code:

```
$('.item').click(function(){
    $(this).siblings('.open').addBack().toggleClass('open');
});

```

Which selects the item clicked, and all siblings (elements with the same parent) that have a class of 'open' and toggles it (so closes open items and opens closed items).