I'm trying to get the following to behave so that when one of the filter-name list items are clicked it shows the ul below it (all ul's with .filter-options are hidden by default) and hides any other ul list that is open. Clicking again on the same filter-name list item would hide that ul as well. Also it would be brilliant if you clicked anywhere else that all of the ul's (.filter-options) would hide.

```
<ul class="all-filters" id="narrow-by-list">
    <li class="filter-name" id="Colour-filter">Colour
        <ul class="filter-options" id="Colour-options-list">
            <li>Black</li>
            <li>Red</li>
            <li>Green</li>
         </ul>
    <li>
    <li class="filter-name" id="Material-filter">Material
        <ul class="filter-options" id="Material-options-list">
            <li>Glass</li>
            <li>Wax</li>
            <li>Resin</li>
        </ul>
    </li>
    <li class="filter-name" id="Size-filter">Material
        <ul class="filter-options" id="Size-options-list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>

```

Here is my current jQuery that some what works...

```
jQuery.noConflict();
        jQuery(document).ready(function(){
        jQuery('#narrow-by-list .filter-name').click(function(event) {
          jQuery('ul.filter-options').not('> ul', this).hide("fast");
          jQuery('ul.filter-options', this).toggle("fast");
          event.stopPropagation();
        });
    });

```

Thanks for the help in advance!