Aslında Mootools (ya da bu konuda jquery) ile oldukça kolaydır.

Sadece üretilen tüm divs aynı sınıf vermek ve hepsini seçin ve katlanabilir davranışı uygulamak gerekir.

Bu bizim projelerinden biri için Mootools ile yazılmış küçük bir betik ve yolda alabilirsiniz. Bu toggle_ ve çizgi bu kontrol daraltmak gerekiyordu div id sonra gelen bölümü ile başlayalım sınıflar ile tüm unsurları getirir.

Yani id 'mydiv1' ile bir div geçiş olurdu sınıf 'toggle_mydiv1' ile bir butteon oluşturmak

İstediğiniz gibi birçok unsuru oluşturmak ve bir komut ile hepsini davranış atayabilirsiniz bu şekilde.

Mootools Yazılı:

window.addEvent('domready', function(){

	var clickAbles = $$('form[class^=toggle_]');
	clickAbles.each(function(el){
		var _class = el.get('class').split(' ');
		var clickElement = _class[0].replace('toggle_','');
		clickElement = $$('ul.buttons li.'+clickElement+' a');

		if(clickElement){

			var myFx = new Fx.Tween(el,{duration: 'long'});
			var myFx2 = new Fx.Tween(el,{duration: 'long'});
			el.store('height', el.getSize().y);
			el.store('state', 'close');
			el.setStyles({'display': 'none', 'height': 0});

			var todoLists = el.getElements('ul.todo_list');
			clickElement.addEvent('click', function(e){
				e.stop();

				if(el.retrieve('state') == "close"){
					el.setStyle('display','block');
					myFx.start('height', [0,el.retrieve('height')]);

					myFx.addEvent('complete', function(){
						todoLists.setStyles({'overflow': 'auto'});
						el.store('state', 'open');
					});
				} else {
					if(el.retrieve('state') == "open"){
						myFx2.start('height', [el.retrieve('height'),0]);
						myFx2.addEvent('complete', function(){
							el.setStyles({'display': 'none', 'height': 0});
							todoLists.setStyles({'overflow': 'hidden'});
							el.store('state', 'close');
						});
					}
				}
			});
		}

	});
});