[SOLVED] Oh noes >.< Going crazy with Mootools Accordion Recursion

[kratsg]

http://trickeries.com/192/raccordion-a-mootools-12-recursive-accordion/comment-page-1/

 

That's the code I'm using. I've implemented it successfully. Now, obviously, I want to be able to open up a nested accordion.

 

So, in a first effort, i've tried outputting (through console.log()) the array of toggler togglers:

 

[span.togglers, span.togglers, span.togglers]//these are first level
[span.togglers]//this is a second level, contained in the second span.togglers of first level

 

Of course, I also did the toggler elements:

 

[ul.elements, ul.elements, ul.elements]
[ul.elements]

 

No big surprise. I guess my main goal is to change the "display" option to be able to recognize that second array of togglers/elements. I'm not quite sure if this is even possible to do?

[kratsg]

Edit/Update

 

Seeing how I can't edit the original post anymore... I've now gotten it to work for the nested accordions. I actually instantiated two objects from the same accordions class on different sets of elements/togglers. It seems to work fine.

 

Now, the main problem I have is the following:

 

Menu 1

-Item 1a

Menu 2

--Nested 2a

-Item 2b

-Item 2c

-Item 2d

Menu 3

-Item 3a

 

This is what my menu looks like, this is fine (it acts like a normal accordion). When I open Menu 1, it opens and displays Item 1a just fine. When I open Menu 2, it shows the toggler for Nested 2a and the rest of the items fine. When I toggle the nested 2a to display the nested links, it literally pushes the links below it under the other menu items:

 

IE:

 

Menu 1

-Item 1a

Menu 2

--Nested 2a

--Nested Item 2aa

-Item 2b

-Item 2c

Menu 3

-Item 3a

 

**Item 2d has disappeared below Menu 3 >.< Is there a way that when I open up a nested menu, I then call the parent toggle to auto-fix the height?

[kratsg]

Edit/Update - Working Perfectly, Solution Provided Below as a modification to make when calling an accordion class in order to fix all height-related bugs (apparently, there are bugs, even with just a non-nested accordion with height issues... maybe this can be of help for others!)

 

//Add the following code before instantiating any accordion class (so if you nest accordions, you can call the same variable)

			//IE6 Fix
			if(window.ie6) var heightValue='100%';
			else var heightValue='';

 

//Add the following code inside ALL accordion objects created, this will not affect the original function of your accordion, and in fact, may improve performance (it did in my case)
onComplete: function() { 
var element=$(this.elements[this.previous]);
if(element && element.offsetHeight>0) element.setStyle('height', heightValue);			
}

 

**Notes: if you have set the element variable previously, this may screw up... you can modify it to some random variable you know you will never use just in case:

 

onComplete: function() { 
var something_you_never_use=$(this.elements[this.previous]);
if(something_you_never_use && something_you_never_use.offsetHeight>0) something_you_never_use.setStyle('height', heightValue);			
}

 

Slightly messier, but hence, should help with the understanding of the code. This is a solution that is used on (as far as I can tell) all codes that provide a solution to nested accordions. Their code is in fact the same as a regular accordion object, but they also loop through. If you set up multiple accordion objects for the nesting yourself, it'll work fine... I haven't found a significant difference in performance issues either way.

 

Edit: Thanks to all the people who helped me and gave me suggestions on fixes! You've all been great :-D