[JS/AJAX] DOM mit Mootools?

[Magerquark]

Kennt sich jemand mit Mootools aus? - Ich habe die Library eingebunden und initialisiere im Head folgendes:

<script type="text/javascript">
 var zusatzinhalt, more;		
 window.onload = function() {
 fader = new fx.Opacity('more');
 zusatzinhalt = new fx.Combo('zusatzinhalt', {height: true, opacity: true, duration: 500, onComplete: function(){
  //fader.toggle();
  }
 }
);		
zusatzinhalt.hide();
}
</script>

Im Body steht dann wiederum:

<p onclick="zusatzinhalt.toggle();"><span id="more">zum Zusatzinhalt</span></p>
<div id="zusatzinhalt">
 <p>Blabla</p>
</div>

Das klappt soweit auch alles wunderbar. Es handelt sich hierbei um das Sliden. Ein Klick auf "zum Zusatzinhalt" und das DIV wird "reingefahren". Es bleibt dann aber "zum Zusatzinhalt" weiterhin stehen. Wie bekommt man es hin, dass zuerst sowas wie "aufklappen" und wenn es aufgeklappt ist "zuklappen" steht? Wenn es an Clientseitige Scriptssprachen geht, bin ich (leider) völlig inkompetent.

[steffenk]

ne, so geht das mit Mootools nicht, der richtige Syntax wäre

window.addEvent('domready', function() {
  var fader = new fx.Slide('zusatzinhalt');
  if( $('zusatzinhalt').visible) {
   fader.slideOut();
  $('more').innerHTML = 'aufklappen';
 } else {
  fader.slideIn();
  $('more').innerHTML = 'zuklappen';
 }
}

das onclick raus.

Ist ohne Gewähr, zeigt aber den Ansatz.

[Magerquark]

Also: So, wie ich es angegeben habe, klappt es schon. Nur eben nicht mit dem Wechsel von "aufklappen" zu "zuklappen". Wobei das onclick mir auch schon etwas unangenehm schmeckte... Also weg damit.

Okay, Dein Ansatz macht beim Betrachten Sinn. Ich denke, das soll anstatt des Scripts (window.onload = function) im Head eingesetzt werden? Und wie "spricht" die Funktion mit der ID "more"? Soll das eher ein Link sein?

[steffenk]

Selektoren ist das Geheimnis

$('xyz') ist das (erweiterte) Objekt mit der id "xyz"

also statt
document.getElementById('xyz').innerHTML = '123';
gehts mit
$('xyz').innerHTML = '123';

[Magerquark]

Okay, das mit den Selektoren hatte ich mir schon aus meinem Beispiel abgeleitet. Also noch einmal zum Mitschreiben: Derzeit habe ich die Lib eingebunden und außerdem im Head noch stehen:

<script type="text/javascript">
var zusatzinhalt, more;
window.addEvent('domready', function() {
 var fader = new fx.Slide('zusatzinhalt');
 if( $('zusatzinhalt').visible) {
  fader.slideOut();
  $('more').innerHTML = 'zuklappen';
 } else {
  fader.slideIn();
  $('more').innerHTML = 'aufklappen';
  }
}
</script>

Im Body steht dann:

<a id="more" href="#">aufklappen</a>
<div id="zusatzinhalt">
 <p>Blabla - langer Inhalt</p>
</div>

Und da passiert nichts. Das DIV zusatzinhalt ist komplett ausgeklappt, der Link sagt zwar aufklappen, aber auch nur, wenn ich es, wie oben, in den Link reinschreibe. Klicken bringt nichts.

Die Funktion besagt doch: Wenn die Seite geladen ist, wende Funktion an. Das DIV soll geslidet werden. Wenn es sichtbar ist, schreibe bei der ID 'more' "zuklappen" rein und wende die Funktion slideOut an. Entsprechend, wenn das DIV nicht sichtbar ist, also wenn es eingeklappt ist, zeige im Element mit der ID 'more' "aufklappen".

Irgendwie... Ich weiß nicht. Schlauch? Wand?