Question

Im looking for a bit of help with some jQuery code.

Basically i have a HTML structure like so.

<ul class="menu">
    <li><a href="#" id="parent-one">One</a></li>
    <li><a href="#" id="parent-two">Two</a></li>
    <li><a href="#" id="parent-three">Three</a></li>
    <li><a href="#" id="parent-four">Four</a></li>
</ul>

My PHP code adds a class=”active” if the user is ‘on’ it, so depending on which of the links is clicked it will look like this:

<li><a href="#" class="active" id="parent-four">Four</a></li>

So thats all fairly straight forward.

What i want to be able to do on page load, is search through each menu item until it finds the one with class=”active” .. then take the ID of that link, change it from parent-xxx to child-xxx and then ‘show’ that child ID.

Is this possible?

Answer 1

$(function() {
    // Within .menu, find .active, grab its id, and replace parent with child
    var new_id = $('.menu').find('.active').attr('id').replace('parent', 'child');

    // Select element with this new id, and show it.
    $('#' + new_id).show();
});​

Fiddle: http://jsfiddle.net/rwgJc/1/