Before anyone brings it up, this is not yet in the MooTools Forge, but it will be soon assuming I don’t become distracted by something else…

The secret ingredient to get this made up was some CSS3 selectors and a bit of recursion.

You basically just pass in a class for the toggles, a class for the elements, and a parent container to reference.

The usage ends up fairly simple:

new rAccordion('container', 'toggle', 'element');

In the example, container is the id of the parent that the classes are in, toggle is the class that each toggle has, and element is the class that each element has. A fourth argument can be passed, which is the options argument for the mootools Accordion class.

There are some kinks thatstill need working out. There are inherit problems with just jamming accordions inside of each other. The way mootools creates the accordion requires quite a bit of inline styles, which include defined heights. These heights become problematic when accordions inside accordions need to expand or contract, but their parent element has a defined height and overflow which will not allow the newly expanded portion to be seen.

I do have something of a solution in place, but it feels a little hacky, but I am not sure it will get any better unless I rewrite the accordion.

If anyone has any ideas on how to address this issue, please drop me a comment.

example

download w/the example

Here is the class:

var rAccordion = new Class({
 
	initialize: function(container, toggleClass, elementClass, options){
		this.container = container;
		this.tClass = toggleClass;
		this.eClass = elementClass;
		this.options = options;
		this.selector = '#' + this.container + ' > .';
		this.makeAccordion();
	},
 
	makeAccordion: function(){
		new Accordion(
			$$(this.selector+this.tClass),
			$$(this.selector+this.eClass),
			this.options
		).addEvents({
			// The onActive and onComplete events added to the stack here to
			// attempt to address some of the css issues.
			'onActive': function(toggle){
				if(toggle.getParent().getStyle('height') != 0)
					toggle.getParent().setStyle('height', '');
			},
			'onComplete': function(a){
				if ($defined(a)) {
					var height = 0;
					a.getParent().getChildren().each(function(e){
						height = height + e.offsetHeight;
					});
					if(height != a.getParent().offsetHeight && a.getParent().offsetHeight != 0)
						a.getParent().setStyle('height','');
				}
			}
		});
		this.selector += this.eClass + ' > .';
		if($defined($$(this.selector)[0]))
			this.makeAccordion();
	}
 
});

A friend (and boss) of mine thought that this would be a good idea, and not being foolish/strange enough to be a coder himself, I decided to make it because it could be useful.

It is a drop in php script that allows you to host your own url shortener / redirector like snurl or tinyurl. Only you will be able to add / remove url’s from it.  This would allow you to essentially brand the url’s you send, or just simplify the linking process on your site or elsewhere.

If you have any trouble, check out the README.txt included, or leave a comment here.

download

For some time I have wanted to create a truly recursive mootools accordion class that could, with properly formatted xhtml, be limitlessly recursive. I have attempted this on several occasions, however have yet to be successful.

I am looking forward to trying again with the advent of mootools 1.2, it will most likely be much easier to complete. Most of the problems that have been encountered have been with how flexible I have tried to make it. I have achieved the desired, however it would only apply to one parent and it’s descendents, however I would still like it to be able to apply to all of the said parents siblings.

Updates will follow.