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 that you can find a better approach by reorganizing your sub items into divs **but** a brute force approach would be to reset the size of your 'item' elements on ANY click.

```
$(document).ready(function(){
    $('.item').click(function(){
        $('.item').css('max-height','33px');

        if($(this).css('max-height') == '33px') {
               $(this).css('max-height','429px')
        }
    });
});

```