Question

How do I access isExpanded, collapsedHeight and expandedHeight inside the jQuery click handler for element.
The way it’s written now won’t work because this means something else inside the click handler than it does outside of it.

function CoolSelect(element)
{
    this.element=element;
    this.isExpanded=false;
    this.collapsedHeight=$(element).height();
    this.expandedHeight=this.collapsedHeight+$('ul',element).height();

    $(this.element).click(function()
    {
        var newHeight;
        if(this.isExpanded){newHeight=this.collapsedHeight;}
        else{newHeight=this.expandedHeight;}
        $(this.element).animate({height:newHeight},100,'liniar');
    });
}

Thank you.

Answer 1

Copy the value of this to another variable in the outer function.

var that = this;

Then use that in the inner function.