Question

I’m currently running into a bit of a problem.

I need to make my Sharepoint 2010 site have an expanding/collapsing quick launch navigation. There are many Sharepoint 2007 solutions and web-parts out there that do exactly what I need. See this example.

However, Sharepoint 2010 does not generate the quick launch HTML the same way as it does in 2007.

The 2007 Sharepoint quick launch is generated with tables and uses plenty of ID’s, while 2010 generates an unordered list with no ID’s.

Because this is generated code I do not want to touch the markup.

The basic markup is as follows:

<div class="menu vertical menu-vertical">
    <ul class="root static">
        <li class="static">
            <span class="static menu-item">
                <span class="additional-background">
                    <span class="menu-item-text">MAIN HEADING</span>
                </span>
            </span>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
        <li class="static">
            <span class="static menu-item">
                <span class="additional-background">
                    <span class="menu-item-text">MAIN HEADING</span>
                </span>
            </span>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
    </ul>
</div>

There can be any number of Main Headings and Sub Headings in the future.

My idea was to use JQuery selectors to separate the Main Headings from the Sub Headings. I’m able to do that by selecting by class and then by li’s that contain anchors inside but I’m having trouble grouping the headings to the sub headings.

I need to find a way to make Heading 1’s onClick event correspond to the Sub Headings under it, and not to the other Sub Headings in the document.

Thank you for any help you can provide.

Answer 1

Here we go (even tested it):

    $(function() {
        //hide sub headings
        $('li:has(a.menu-item)').hide();
        //show subs on parent click
        $('li:has(span.menu-item)').click(function() {
            //get sub headings and show them
            $(this).nextUntil('li:has(span.menu-item)').toggle();
        });
    });