Treehouse: Grow your CSS skills. Land your dream job.

using ‘id’ to reference an object

  • # November 12, 2009 at 11:30 am


    I am using a modified version of the ‘simple accordion’ as a menu system, and a jQuery plugin for using session variables.

    As with all menu systems, it is a good idea that when the page refreshes, or a new page is chosen from the menu, the system should open the menu at the correct point.

    This is easy enough when the menu system is set, and does not change.. I can identify each menu section by a number like this:

    $(‘#accordion dd’).eq(5).show();

    but my system has a dynamic menu and as such different users get a different subset of the main menu… therefore using the above no longer works.

    I need a way of referencing the $(‘#accordion dd’) by it’s id (which i have set, eg: reports. tools etc etc)

    I have tried to loop through the list and only call show() when the item with a matching id is reached, but this just opens all menu items…

    I have also tried

    if ( $(‘#accordion dd’).id = pagename ) {
    console.log(“Yes ” + pagename + ” is here”);

    }else {
    console.log(“No not here”);

    with no joy….. if anyone has overcome this, it would be nice to hear your ideas!


    # November 13, 2009 at 8:28 am

    OK, this was fun… I have finally solved my problem

    to reference the id of an element, use .attr(‘id’)

    here is the code that allows the accordion to ‘remember’ which section to show on page refresh/change

    $(document).ready(function($) {

    var iShow = 0;
    var j = $(‘#accordion dd’).length -1;
    var i = 0;

    iShow = parseInt($.session(“eq”))-1;

    $(‘#accordion dd’).hide();
    $(‘#accordion dd’).eq(iShow).show();

    $(‘#accordion dt a’).click(function(){

    for (i=0; i< =j; i++) {
    if ($('#accordion dt a').eq(i).attr('id') == {
    //For some reason, the session object doesn't like 0, so I add 1 to the results here
    // and take it away when I am storing it in my iShow variable.



    $('#accordion dd').slideUp();

    return false;



    have fun!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.