jQuery accordion with multiple UL elements

Question

I am using jQuery to produce an accordion effect in a menu I have created. The menu is tabbed and uses jQuery UI Tabs and in accordance with their documentation I cannot use multiple effects on one element. As such, I have used slideUp() and slideToggle() to create the effect which works, a la <a onclick="$('ul#categories li ul').slideUp();$(this).next().slideToggle()">Subjects</a>.

However, my list has another unordered list within it and this does not get displayed. I do not want to have lots of links set to activate the slider as this gets very complex to maintain within my CMS which outputs the links as lists. An example of my code would be

<div id="member-categories">
<ul id="categories">
    <li>
        <a onclick="$('ul#categories li ul ').slideUp();$(this).next().slideToggle()">Heading 1</a>
        <ul>
            <li><a href="#">Link 1</a>
                <ul>
                    <li><a href="#">Sub-Link 1</a></li>
                    <li><a href="#">Sub-Link 2</a></li>
                    <li><a href="#">Sub-Link 3</a></li>
                    <li><a href="#">Sub-Link 4</a></li>
                </ul>
            </li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
    <li>
        <a onclick="$('ul#categories li ul').slideUp();$(this).next().slideToggle()">Heading 2</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
</ul>
</div>

If I click Heading 1, only Link 1 and 2 are displayed. Clicking Heading 2 displays all links. Why is the <ul> of Link 1 in Heading 1 not displaying?

Thanks

Answer 1

Is this something like this for you're looking for?

Demo

When you're selecting '#Categories li ul' this is hiding all inner list and list items. When you use slideDown on the first unordered list, it will only show (change the display property of) its direct children (in other words, the inner list and list items are still hidden). The inner list items display property is still set to 'display:none'. Instead if you 'show' each 'ul' then its direct children (each li) will be shown.

Edit: Alternativly (as the demo demonstrates), you can just hide the first set of un-ordered lists.

$('#categories').children().children('ul').slideUp();

This way, the inner lists are technically still shown. So when you show the outer list, all its children are shown.

Answer 2

onclick="$('ul#categories li ul').slideUp();$(this).next('ul').slideToggle()">Subjects</a>

how about that?