Ganz dumme Frage von Javascript Noob

[SeriousBadMan]

Hallo,

ich spiele grade mit script.aculo.us rum, und bin über ein Problem gestolpert, dessen ich nicht Herr werde, vermutlich, weil ich eben einfach JS nicht kann

Es geht darum: Ich lasse durch einen Klick auf "Mehr Herausfinden" einen zusätzlichen Textabsatz ausrollen. Danach kann man ihn wieder einrollen, in dem man auf "Wieder weniger Text anzeigen" klickt.

Das funktioniert mit folgendem Code [und der Einbindung der entspr. Javascript Dateien von script.aculo.us im Header] auch ganz ausgezeichnet:

Code: Alles auswählen

<script type="text/javascript" language="javascript" charset="utf-8">
// <!&#91;CDATA&#91;
var effect_1 = null;
// &#93;&#93;></script>
<a href="#" onclick="effect_1 = Effect.SlideDown&#40;'d1',&#123;duration&#58;1.0&#125;&#41;; return false;">Mehr Herausfinden</a>
<div id="d1" style="display&#58;none;"><div><a href="#" onclick="effect_1 = Effect.SlideUp&#40;'d1',&#123;duration&#58;1.0&#125;&#41;; return false;">Wieder weniger Text anzeigen</a>

Text&#58; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

</div></div>

Problem: Ich kann es nicht zweimal auf einer Seite anwenden. Benutze ich das ganze zweimal hintereinander, wird auch das zweite "Mehr Herausfinden" immer den ersten Text ausrollen.

In meiner Unkenntnis habe ich mal versucht, den zweiten auszurollenden Text in ein extra div oder span zu setzen, das hat aber auch nicht geholfen. Wie kriege ich es hin, dass das zweite "Mehr Herausfinden" den zweiten Text ausrollt?

Würde mich freuen wenn mir hier jmd. helfen könnte!

[Link-Geier]

ich hab nicht wirklich Ahnung davon - gehe aber davon aus das dein Fred bald im richtigem Unterforum gefunden wird.

In meiner Unkenntniss könnte ich mir trotzdem vorstellen das hier ein Teil des Problems liegt:

<div id="d1" style="display:none;"><div><a href="#" onclick="effect_1 = Effect.SlideUp('d1',{duration:1.0});

[xlb]

Code: Alles auswählen

<a href="#" onclick="effect_1 = Effect.SlideDown&#40;'d1',&#123;duration&#58;1.0&#125;&#41;; return false;">
Mehr Herausfinden
</a>

<div id="d1" style="display&#58;none;">
<div>
<a href="#" onclick="effect_1 = Effect.SlideUp&#40;'d1',&#123;duration&#58;1.0&#125;&#41;; return false;">
Wieder weniger Text anzeigen</a>

Hast du diesen Block beim 2. mal exakt so übernommen? Also 2 mal ein DIV mit der ID "D1"? Beim 2. müsstest du die ID und die entsprechenden Parameter in den JS-Funktionen anpassen.

Code: Alles auswählen

<div id="d2">
... effect_2=Effect.SlideUp&#40;'d2',&#123;duration&#58;1.0&#125;&#41;;

Sollte gehen ...

[Link-Geier]

ich hab keine Ahnung davon - aber so in die Richtung war auch mein Gedankengang.

[SeriousBadMan]

@xlb,

herzlichen Dank, das wars!

@schnippschnapp

das dachte ich auch, nur irgendwie dachte ich, wenn ich die div id wechsle geht das JS bestimmt nicht mehr... aber ja, es funktioniert was xlb sagt.

[800XE]

irgendwie dachte ich, wenn ich die div id wechsle

DIV-IDs darf es prinzipiell nur einmal geben ...
.... mehrfach darf es nur CLASS geben

Class ist für CSS-Zuweisungen die mehrfach genutzt werden
DIV-IDs sind für DIV die irgendwie mit Befehlen angesprochen werden

[xlb]

... wenn ich die div id wechsle geht das JS bestimmt nicht mehr

Nur zur Info: IDs sind im DOM-Baum eines (validen) Dokuments immer "unique", um eben exklusiven, bzw. expliziten Zugriff per Skript zu erlauben!