'Collapse all' problem with jQuery Treeview plugin

Question

And the problem is that after I click on the 'Collapse all' link, 'some' of the pluses and minuses are displayed opposite to what they should be: i.e. an 'expandable' node would be shown with a minus next to it. Apart from that, the tree works correctly. (Well, the 'expand all' functionality is affected, as well but I think this is part of the same problem). Which nodes are displayed wrong depends on which of them were open before the tree was collapsed. If you think this is important, I will provide you with an exact pattern.

I am looking for guidance of how to tackle the problem and not a 'solution', although this would be nice, of course :-). The tree is loaded through Async Treeview extension and a JSON string. I suspect that this might have to do with the problem. Here is the html of the tree after it is loaded:

<li class="expandable lastExpandable" id="333">
<div class="hitarea expandable-hitarea lastExpandable-hitarea "></div>
<span class="important" id="333">Admin</span>
<ul style="display: none;">
    <li class="expandable" id="55">
    <div class="hitarea expandable-hitarea "></div>
    <span class="important" id="55">Admin A</span>
        <ul style="display: none;">
            <li class="expandable" id="85">
            <div class="hitarea expandable-hitarea "></div>
            <span class="important" id="85">Dir A</span>
                <ul style="display: none;">
                    <li class="last" id="98"><span class="important" id="98">A1</span></li>
                </ul>
            </li>
            <li class="expandable" id="88">
            <div class="hitarea expandable-hitarea ">
            </div><span class="important" id="88">Dir B</span>
                <ul style="display: none;">
                    <li id="89">
                    <span class="important" id="89">B1</span>
                    </li>
                    <li class="last" id="90">
                    <span class="important" id="90">B2</span>
                    </li>
                </ul>
            </li>
            <li class="expandable lastExpandable" id="102">
            <div class="hitarea expandable-hitarea lastExpandable-hitarea "></div>
            <span class="important" id="102">Dir C</span>
                <ul style="display: none;">
                    <li class="last" id="103">
                    <span class="important" id="103">C1</span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="expandable lastExpandable" id="84">
    <div class="hitarea expandable-hitarea lastExpandable-hitarea "></div>
    <span class="important" id="84">Admin B</span>
        <ul style="display: none;">
            <li class="expandable" id="100">
            <div class="hitarea expandable-hitarea "></div>
            <span class="important" id="100">Dir A</span>
                <ul style="display: none;">
                    <li class="last" id="101">
                    <span class="important" id="101">A1</span>
                    </li>
                </ul>
            </li>
            <li class="expandable lastExpandable" id="10">
            <div class="hitarea expandable-hitarea lastExpandable-hitarea "></div>
            <span class="important" id="10">Dir B</span>
                <ul style="display: none;">
                    <li class="last" id="91">
                    <span class="important" id="91">B1</span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

As I said, I would welcome possible guidance as to which the cause of the problem would be: CSS, JSON, Treeview async, Threeview? I will keep looking at the plugin code to better understand how it works, but any possible direction from someone more experienced would be a time saver.

Answer 1

This will be surely helpful http://short-tag.info/2013/02/jquery-treeview-expand-all-collapse-all-not-working/ I had the same problem and it worked for me

Answer 2

It does not actually solve the problem, but after some more careful googling I discovered that this is due to incompatibility between jQuery and Treeview versions. (I am using the latest of both). Anyway, the workaround to this is to use animated property. This is what I noticed also in this example, which it worked unlike my code. The only difference was the use of the animated property, but I didn't believe it only to come across this page, thankfully only a few minutes later.

As I said it doesn't solve the problem, not only because it is a workaround, but because it breaks again after some collapses, expansions and toggling. However, it is not that obvious now (previously it only took one collapse to break), it won't show to someone using the tree 'sensibly' and after all, at least in my case, it doesn't really affect the functionality. It works for me now.