I have tabs setup on a page but I'm trying to have another div show up in the sidebar when a user clicks on the tab. I can't wrap the ul and the sidebar together....

example: A user clicks on the 'investment consulting' tab, all of the 'investment consulting' info shows up in the main-content div (typical tab/content stuff)....At the same time, the pricing for the 'investment consulting' will show up in the sidebar, which is a completely separate div.........there are 3 consulting services and 3 different pricing divs that need to show up when each tab is clicked.......

I have no idea how to make this happen :) I've searched the forums and I know it probably has to do with delegation or something that I just don't understand......

The code I have for the tabs is pretty easy and straightforward:

//When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("selected"); //Remove any "active" class
        $(this).addClass("selected"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
       
        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).show(); //Fade in the active ID content
      
        return false;
    });

});

Any help is GREATLY appreciated!

thanks.