How to save a nested JqueryUI accordian's state and reopen it by reading later

Question

Hi I am dealing with a very nested accordion. What I want to do is whenever the user changes the state of the accordion I want to record that change in the URL so that when I refresh I can read the URL and create a new accordion with the same state. I already know about the $( ".selector" ).accordion( "option", "active" ), but everything about it is confusing me.

First off what do I select as ".selector" because I initially use "div.folder" as a selector to create the accordion, but I think the jQueryUI uses that internally and it doesn't show up on while inspecting the html page. This is how I create the accordion.

$("div.folder").accordion({collapsible: true, active :false, heightStyle: "content" , activate: function( event, ui ) { console.log($( "#accordion" )
                .accordion( "option", "active" ))}});

Second when it does work what will it return? A number?, and does it have the state of the whole tree? Third when I have the state how do I tell jqueryUI to recreate the accordion according to a specific state? Finally I do not know if this will cause a big problem but I have two accordions working together as one here is a code snippet.

    //uses Jquery UI to turn the file system into a collapsible menu
    $("div.folder").accordion({collapsible: true, active :false, heightStyle: "content" , activate: function( event, ui ) { console.log($( "#accordion" )
                .accordion( "option", "active" ))}});
    $("div.file").accordion({collapsible: true, active :false, heightStyle: "content",  activate: function( event, ui ) {console.log($( "#accordion" )
                .accordion( "option", "active" ))}});

Will this cause a problem while querying the state? I am not entirely sure if I am dealing with one accordion or two.

Answer 1

Okay after a lot of trial and error I finally got it to work. I found nothing too useful doing research on the web so I though I would try to help those that may come across this question. What I am about to share worked on my specific implementation, it may not work with other implementations so I will try and clarify my implementation as much as possible.

Ok so first the problem started with me needing to have a nested jquery ui accordion. The way I did that was by having all the target tags be of the same class. When I called the .accordion method I did it on the entire class. This is what made my situation different than all the situations I ran across on the web. Because of this situation this big accordion is almost like just a list of smaller accordions. If I asked for

$(.selector).accordion( "option", "active",)

it would just tell me 0 because "in a sense" there where multiple accordions, and it did not know to chose which one.

The solution I found by chance was when I printed

$( .selector ).accordion({ activate: function( event, ui ) {}})

on to the screen. I discovered that Jquery UI was treating my big accordion as if it was an array of single unit accordions. So I went back in my code and made sure each single "unit" accordion had its own unique id. With that information I used made an event handler that every time I changed the accordion it would append the id the of opened "mini accordions" to the url (or delete if it has been closed).

That is how I "saved" the state. To reopen the proper state I read the url, parsed it, then for each unique id I simply called

$( "uniqueID" ).accordion( "option", "active",0 )

this would essentially find the "mini accordion" and open it. Because this is being done for all the "mini accordions" that were opened your big accordion will unravel just the way you wanted it.

If anyone is reading this, please ask any questions you need and I will answer if I remember.