Question

I’m experimenting with TreeView plug-in located here:
http://docs.jquery.com/Plugins/Treeview

One of the options it has is “unique” – to have only one item expanded at a time.

It works very well for display purposes, but then I try to hook in to the TreeView’s “toggle” property/event to find out which one exactly was expanded.

When “unique” is set to true, the function passed to “toggle” seems to get fired for each of the main list elements, preventing me from capturing which one actually initialized expansion. I see why that’s done – to make sure other elements are toggled so only one is expanded.

Any ideas on how get only the id of the “unique” list item that was toggled/expanded.

example code below

$(document).ready(function() {
$("#browser").treeview({
    collapsed: true,
    unique: true,
    toggle: function()
    {
            $('#console').append(this.id + ' was toggled');
    }
 });
});

<ul>
<li id="1">Ottawa
    <ul>
        <li>Item 1</li>
        <li>Item 9</li>
    </ul>
</li>
<li id="2">Montreal
    <ul>
        <li>Item 2</li>
        <li>Item 8</li>
    </ul>
</li>
<li id="3">Quebeque
    <ul>
        <li>Item 3</li>
    </ul>
</li>
<li id="4">Calgary
    <ul>
        <li>Item 7</li>
    </ul>
</li>
<li id="6">Toronto
    <ul>
        <li>Item 10</li>
    </ul>
</li>
</ul>
<div id="console"></div>

Answer 1

That plugin could use some more events, but you can easily tell which one was clicked by checking if it has any visible children:

if($(this).find("ul:visible").length)
{
    $('#console').append(this.id + ' was toggled');
}

Depending on your HTML structure you can change find to the quicker children. This still runs the toggle event for all nodes, but checks for the right node.
See in in action here: http://jsbin.com/esoxu