Jquery Treeview toggle issue

Question

I am testing Jquery Treeview and finding a bug which I cannot figure out.

What seems to be happening is that the toggle is getting messed up on the first, second level nest.

To test...go to the fiddle, click Collapse All then Expand All and you'll see the node which does not expand properly, but it's + icon turns into a - icon so that's correct at least.

Is this a known bug? It happens on their demo too.

I know there are more recent plug-ins claiming to do the same thing but I like the simplicity of this (assuming I can iron out this bug that is!)

I'm pretty sure the bug is in the toggler and guess its not recursing properly:

// handle toggle event
        function toggler() {
            $(this)
                .parent()
                // swap classes for hitarea
                .find(">.hitarea")
                    .swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
                    .swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
                .end()
                // swap classes for parent li
                .swapClass( CLASSES.collapsable, CLASSES.expandable )
                .swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
                // find child lists
                .find( ">ul" )
                // toggle them
                .heightToggle( settings.animated, settings.toggle );
            if ( settings.unique ) {
                $(this).parent()
                    .siblings()
                    // swap classes for hitarea
                    .find(">.hitarea")
                        .replaceClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
                        .replaceClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
                    .end()
                    .replaceClass( CLASSES.collapsable, CLASSES.expandable )
                    .replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
                    .find( ">ul" )
                    .heightHide( settings.animated, settings.toggle );
            }
        }
        this.data("toggler", toggler);

Ganesh D · Accepted Answer · 2013-10-18 09:48:53Z

2

Just check the link http://www.dynamicdrive.com/dynamicindex1/treeview/demo/index.html. Here they do not used the cookie for save the collapse and expand data. Thats why its working perfectly. If we used cookie, they then the collapse and expand are inconsistent.

Just change the $(".treeview").treeview({ control: "#treecontrol" }); With

$(".treeview").treeview({ control: "#treecontrol", animated: "fast" });

And see, its working perfectly

answered Oct 18, 2013 at 9:48

Ganesh D

2,1111 gold badge13 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

StudioTime Over a year ago

This works great, even with persist so thanks! But, it's a pain having to use the animated... even on fast it's still not good looking and as clean as no animation at all. Is there a way around that? To make animated instant?

Ganesh D Over a year ago

You just adjust animated parameter with numeric value. Say "animated: 0" should be no animation at all. "animated: 1000" has a very much slower animation than fast. I think its work for you.

Kami's Aibou Over a year ago

A while later, but I came across this question while dealing with the same issue. I wanted to add that "animated: 0" does not work, but "animated: 1" does.

Collectives™ on Stack Overflow

Jquery Treeview toggle issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related