Á falta deste tipo de objectos, decidi adicionar mais um a vasta lista que se encontra na net. O código é bastante simples: var PanelBuilder = { build: function() { var contents = $$('.panelContent'); $$('.panelHeader').each(function(element,index){ Event.observe(element,"click",function(){Effect.toggle(contents[index].id,'blind');},false); }); } } Event.observe(window,"load",PanelBuilder.build,false);

A função Build faz o seguinte:

1. ···Cria um array com todos os elementos que tenham declarado a cssClass ".panelContent". var contents = $$('.panelContent');
2. ···De seguinda navega por todos os elementos que declarem a cssClass ".panelHeader" $$('.panelHeader').each(function(element,index){
3. e criar um event handler para o click para cada elemento. Event.observe(element,"click",function(){Effect.toggle(contents[index].id,'blind');},false);
4. O evento click faz mostrar ou esconder o conteúdo de cada painel. Effect.toggle(contents[index].id,'blind');

 

A estrutura HTML do painel é bastante linear:

<div id="myPanel" class="panel"> <div id="myPanel_header" class="panelHeader">My Panel title</div> <div id="myPanel_content" class="panelContent"> My panel content </div> </div>

Para fazer download do código clique aqui.

Para visualizar em exemplo, clique aqui.