Jquery Treeview has wrong hitarea icon on persisted tree

Question

If I use the option "cookie" to persist the treeview state like this:

//apply treeview to container list (in sidebar)
$("#container_tree").treeview({
    collapsed: true,
    animated: "fast",
    persist: "cookie",
    cookieId: "containerTreeMainMenu"
});

I have a problem with the hitarea icons (the icons used to toggle each level of the tree).

If I expand one part of the tree, then reload the page (as to let the cookie remember and load the correct expand/collapse for each level), upon the reload ALL hitarea icons are the plus sign, as if treeview assumed nothing was expanded (even though it is, the cookie works fine in leaving the expanded sections as expanded). When you then click a hitarea to collapse, the icon changes into the minus, so the icon will forever be inverted against how it should behave.

Also, using the expand/collapse links, the behaviour is inverted from what is expected. So it seems that somewhere the current status of each node is not stored correctly/is stored or read inverted... — Matt Welander

Matt Welander Matt Welander · Accepted Answer · 2014-11-05T17:33:34

Ok, I got it now.

Since this version of jquery treeview is initialized from the actual html element (the UL that you are turning into a collapsible tree) it is for some reason sensitive to the display property.

My UL was inside a DIV that had display:none on page load (I would toggle it with a button to fade in when needed). Turns out this messed up the status of the nodes to the point where they were displayed correctly, but the plugin read them invertedly (causing both +/- icons and the functions expand all/collapse all to behave in an inverted way).

My solution was to use a negative left position for my DIV instead of the display property and it works like a charm =)

Jquery Treeview has wrong hitarea icon on persisted tree

1 Answers