Question

I’m looking to go away from our current according style menu and use jquery in it’s place. The problem is our curent code uses values that we pass in on the query string to tell the menu which section should be open and what item in that section should be highilghted. I’ve been trying to work with jquery to accomplish this but i’m new to jquery and am stumbling. I’ve seen a lot of examples out there of according style menu’s, but none allow me to pass in the section and the row to hightlight.

So i’ve found a simple according style menu that uses jquery and i’m thinking that if i have an unordered list, somethign like this

<ul id="accordion">
        <li>
            <div>
                Sports</div>
            <ul>
                <li><a href="#">Golf</a></li>
                <li><a href="#">Cricket</a></li>
                <li><a href="#">Football</a></li>
            </ul>
        </li>
        <li>
            <div>
                Technology</div>
            <ul>
                <li><a href="#">iPhone</a></li>
                <li><a href="#" id="c23">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
            </ul>
        </li>
        <li>
            <div>
                Latest</div>
            <ul>
                <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
            </ul>
        </li>
    </ul>

I should, with jquery be able to do a $(‘accordion’).find(‘c23’) and be able to slideup this section and hightligh the href.. but i can’t figure out the code to do it… Here is what i have so far to get the according effect

 $("#accordion > li > div").click(function () {

            if (false == $(this).next().is(':visible')) {
                $('#accordion ul').slideUp(300);
            }
            $(this).next().slideToggle(300);
        });

this is some code i found at http://viralpatel.net/blogs/2009/09/create-accordion-menu-jquery.html…

Anyway.. was hoping someone descent at jquery would be able to help me out.

Thanks
shannon

Answer 1

I think your problem is largely that you’re missing the “#”‘s in your find code and that you’re not accessing the parent element. Here’s a fixed example:

var wanted_id = 'c23'; // This is the bit you'd get off the querystring.

$(document).ready(function ( ) {
    $("#accordion > li > div").click(function () {

            if (false == $(this).next().is(':visible')) {
                $('#accordion ul').slideUp(300);
            }
            $(this).next().slideToggle(300);
    });

    // This is the bit that handles the highlighting and automatic opening
    $('#accordion').find('#'+wanted_id).css('background-color','blue'); 
    $('#accordion').find('#'+wanted_id).parent( ).parent( ).slideToggle(300);

});

​You can test this at a jsfiddle: http://jsfiddle.net/DkZYb/1/