[thelist] mootools - dynamic menu expand/contract

Bob Meetin ontheroad at frii.com
Sun Jun 3 11:29:29 CDT 2007

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. 


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
> |

More information about the thelist mailing list