[thelist] mootools - dynamic menu expand/contract

[Robert O'Rourke]

Bob Meetin wrote:
> I'm trying to set up a vertical menu using mootools/javascript that will 
> expand/contract and remain expanded if a menu sub-item is selected.  I'm 
> not familiar enough with javascript to know how to reconfigure this to 
> make it happen.  See a 90% example at:
>
> http://www.dottedi.biz/codesamples/mootools/home.html
>
> The goal: when I select an item under Heading 3, that page will open as 
> it does but the Heading 3 list should stay expanded.  If someone has 
> seen a working example using mootools/accordion effect, please don't be 
> shy...
>
> -Bob
>
>   

There's a bit of code that the above example doesn't have that was on a 
tutorial I used some time ago so I don't know if it works the same way 
now. You have to add a title attribute to each header bit that you click 
on and then all the links you have under that heading need 
#whatever-the-headers-title-attribute-is stuck on the end of the url. If 
that makes sense.

Anyway try replacing it with this:
   

	var toggles = $$('h3.atStart');
	var stretchers = $$('div.atStart');
	var accordion = new Accordion(toggles, stretchers, {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#ff3300');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#222');
		}
	}, $('accordion'));
			
			
	var newTog = new Element('h3', {'class': 'toggler'}).setHTML('Home');
			
	var newEl = new Element('div', {'class': 'element'}).setHTML('<p><a href="home.html">Home</a></p>');
			
	accordion.addSection(newTog, newEl, 0);

|        var i = toggles.length; while(i) { 
if(window.location.href.indexOf(toggles[--i].title) != -1) break; }        
        accordion.showThisHideOpen(stretchers[i]);


Really can't promise it'll work because theres some other stuff in there 
that I don't have a clue what it does... :-\

Rob
|