So I have managed to create a recursive mootools accordion, which is something I have wanted to get done for a long time.

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:

code!

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:

code!

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();
	}
 
});

Microsoft Expands Support for Web Standards

Company outlines new approach to make standards-based rendering the default mode in Internet Explorer 8, will work with Web designers and content developers to help with standards behavior transition.

Microsoft has finally been cajoled into standards compliance. For the first time ever, it looks like web developers can create standards compliant pages confident in the knowledge that Internet Explorer will render them correctly - without hacks, and without conditional comments.

Bravo Internet, Bravo.