script.aculo.us - Toggle ohne id?

[timo]

Abend,

ich spiele gerade mit script.aculo.us herum.

Ich möchte ein Element bei jedem Click togglen, sprich ist das Element ausgeklappt einklappen, ist es eingeklappt ausklappen.

Dafür nutze ich für ein onclick-Event
Effect.toggle('id1','blind');

Jedoch möchte ich nicht immer ein Element mit fester id togglen, sondern immer das Kindelement mit dem Tag ol. Ist ein Toggle für ein Gegebenes Element mit script.aculo.us möglich?

grüßle

P.S.: Wie kann ich eine Ausgangsituation für den Toggle-Effekt beim Seitenladen einstellen, ohne das dieser dann als störender Effekt automatisch beim Laden eintritt. Sprich ich möchte ein Element, wenn JavaScript aktiviert ist schwuppdiwupp beim Laden unbemerkt ausblenden, danach togglen.

[André Laugks]

Hallo!

Mit script.aculo.us habe ich noch nichts gemacht, arbeitet ja aber sehr eng mit Prototype zusammen.

Dafür nutze ich für ein onclick-Event
Effect.toggle('id1','blind');

Jedoch möchte ich nicht immer ein Element mit fester id togglen, sondern immer das Kindelement mit dem Tag ol. Ist ein Toggle für ein Gegebenes Element mit script.aculo.us möglich?

Verwende "this"

Effect.toggle(this,'blind');

Ich würde mir aber eine Hilfsfunktion bauen, die dass Toggle verwaltet.

function toggleHelper(obj) {  
    Effect.toggle(obj, 'blind');  
}  

onclick-Event => toggleHelper(this)

P.S.: Wie kann ich eine Ausgangsituation für den Toggle-Effekt beim Seitenladen einstellen, ohne das dieser dann als störender Effekt automatisch beim Laden eintritt. Sprich ich möchte ein Element, wenn JavaScript aktiviert ist schwuppdiwupp beim Laden unbemerkt ausblenden, danach togglen.

Das macht man ab besten mit "dom-ready". Das wird abgefeuret, sobald das DOM geladen ist, also noch vor onload.

Hier würde ich wieder eine Hilfsfunktion bauen, muss man aber nicht.

document.observe("dom:loaded", function() {  
     toggleStart();  
});  
  
function toggleStart() {  
     /*  
       Alle Elemente suchen die auf und zu geklappt werden sollen. Dazu kann man eine Hilfs-CSS-Klasse verwenden, als eine Art Id.  
     */  
  
  
     /*  
       Ungetestet!!! Ich verwende sonst jQuery. Prototype arbeitet etwas anders.  
    */  
     $$('div.foobar').each(function() {  
         $(this).setStyle({display: 'none'});  
     });  
  
  
}

<div class="foobar"></div>  
<div class="foobar"></div>