CODEWITHSUNDEEP
jquery
jvcoach23
jvcoach23

Reputation: 3037

change the class of in jquery

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

Upvotes: 0

Views: 180

Answers (2)

Mo Valipour
Mo Valipour

Reputation: 13486

jquery UI Accordion (and probably many other accordion plugins) provide some events that fire whenever the current item is changed in your accordion. You can handle those events and highlight your item there. This is easier, cleaner, etc.

see events section of this: http://jqueryui.com/demos/accordion/

$( ".selector" ).bind( "accordionchange", function(event, ui) {
  $(ui.newContent).find("<item to highlight selector").addClass(".highlighted");
});

Upvotes: 0

n00dle
n00dle

Reputation: 6043

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/

Upvotes: 1

Related Questions