[thelist] mootools - dynamic menu expand/contract

[Bob Meetin]

Robert et al,

I looked through the code, messed a bit, but could not get it to work.  
So- research... I did 'google' and found a number of examples beyond 
what is documented on the mootools site. Many of the examples are/were 
only half-baked.  They show how it would look, but are anchored (#) to 
the same file and if you point to alternate files it would collapse and 
return to the starting link/element.  However, I found a couple that 
work, including the example on http://moofx.mad4milk.net/.  It uses 
anchors and I was able to use that to turn the accordion into an 
accordion menu.  To make a long story short, I wrote up a really basic 
tutorial on how I got it to work:

Visit:  www.dottedi.biz/codesamples/mootools/page1.html

If someone with better JavaScript skills than me can explain how to get 
it to work the 'other' way, send to me and I'll add the notes. 

-Bob

Robert O'Rourke wrote:
> 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
> |
>