Question

I admit to being somewhat of a copy and paste JavaScript developer (with a strong background in other languages). I’m using the jQuery accordion, and using cookies to save the selected accordion section. I found some code which I integrated into my code. The key section is as follows.

change: function (event, ui) {
     var index = $(this).find("h3").index(ui.newHeader[0]);
     $.cookie(accordion, index);
}

This works, but I hate using code I don’t understand. I understand that the index is discovered by using the find method (which makes the assumption that I don’t have any h3s within the content), but what I don’t understand is what the ui.newHeader[0] is doing. What is the newHeader array, and what is its purpose here?

Thanks,
Erick

Answer 1

Looking at the source for jquery.ui.accordion.js, it’s just an object that contains the newly selected element.

You can see for yourself if you just check out the source:

// find elements to show and hide
var toShow = clicked.next(),
    toHide = this.active.next(),
    data = {
        options: options,
        newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
        oldHeader: this.active,
        newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
        oldContent: toHide
    },
        down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );

    this.active = clickedIsActive ? $([]) : clicked;
    this._toggle( toShow, toHide, data, clickedIsActive, down );

    return;
},

newHeader is not an array, it’s an object that represents the newly selected element. The code you posted finds all h3 elements in the accordion element, and then it takes the index of the newHeader. The element that newHeader represents changes each time the accordion changes.