Div ein/aus blenden

[günther g.]

Hallo

Ich brauche auf meiner Website die funktion Div-tags per Click ein und auszublenden.

Ich hab eine Liste von Menüpunkten und sobald ich auf einen Menüpunkt klicke soll unter der Liste das dazugehörige div ein geblendet bzw. ausgeblendet werden. Dass das ganze mit display:block/none funktioniert ist mir klar und ich denke das mein html code dazu auch geeignet ist. Meine Javascript kentnisse sind halt etwas bescheiden und ich hab ehrlichgesagt keinen Plan wie ich das realisieren soll.
Eventuell kann mir ja wer auf die weiterhelfen.

Die funktion soll folgendes machen:

-Bei Seitenaufruf alle divs auf class="geschlossen" stellen. (damit user   ohne javascript auch was sehen sind sie standart auf class="geöffnet"

-Wenn man auf den entsprechenden Menüpunkt klickt soll die funktion einfach umschalten. Also wenn "geschlossen" ist soll es sich ändern auf "geöffnet" und umgekehrt.
das ganze über die ID des div elements

Html Code:

  
<ul>  
 <li>Punkt 1</li>  
 <li>Punkt 2</li>  
 <li>Punkt 3</li>  
</ul>  
  
<div id="punkt1" class="geöffnet">  
 <h1>Punkt1</h1>  
 <p>text1</p>  
<div>  
  
<div id="punkt2" class="geschlossen">  
 <h1>Punkt2</h1>  
 <p>text2</p>  
<div>  
  
<div id="punkt3" class="geschlossen">  
 <h1>Punkt3</h1>  
 <p>text3</p>  
<div>  

CSS-Datei

  
.geöffnet {  
display:block;  
}  
  
.geschlossen {  
display:none;  
}  

[günter .g]

Was ich noch vergessen hab zu sagen:

Falls wer so freundlich ist und mir einen script bastelt bitte ich um eine kurze erklärung. Ich will das ja verstehen und nicht einfach in die seite reinschnipseln

[Tomar]

Hi

Die funktion soll folgendes machen:

-Bei Seitenaufruf alle divs auf class="geschlossen" stellen. (damit user   ohne javascript auch was sehen sind sie standart auf class="geöffnet"

Die Kritisierung dieses Rechtschreibfehlers überlasse ich den anderen ;)

das ganze über die ID des div elements

Bingo! Kennst du getElementById?

Ein Script wird dir hier niemand basteln, denn das hier heißt ja "Self"-HTML. Aber wir können dir gerne Einstiegspunkte geben.

Am Besten definierst du eine Funktion, die als Übergabeparameter die Element-ID verlangt. Per getElementById greifst du auf das Element zu und kannst dort die class-Eigenschaft ändern. Das wäre dein angestrebter Lösungsweg.

Den Lösungsweg den ich dir vorschlage ist folgender: Vergiss das Umschalten der CSS-Klassen! Das "Menü" besteht momentan bei dir aus einer Liste, mach daraus eine Liste mit Links. Diesen Links setzt du das Attribut onClick auf "if(document.getElementById('punkt1').style.display!='block') document.getElementById('punkt1').style.display="block"; else document.getElementById('punkt1').style.display="none";"
Das setzt du entsprechend auf "punkt2" und "punkt3" (ungetestet).

Eine andere, bessere Lösung ist der JavaScript-Befehl appendChild u.ä.

Hier die entsprechenden Links:
Funktion getElementById
Node-Technik zu appendChild etc.

Hoffe ich konnte dir irgendwie helfen.

Lg
Tomar

[günter g.]

Also im prinzip so?:

  
            <script type="text/javascript">  
            function toggle(id) {  
				if(document.getElementById('id').style.display!='block') { 														  
				document.getElementById('id').style.display="block";}  
				else {document.getElementById('id').style.display="none"}  
			}  
  
            </script>  

<li><a onClick="toggle('Punkt1')"

Irgendwie passiert da nicht viel

[Tomar]

Hi

<script type="text/javascript">
            function toggle(id) {
if(document.getElementById('id').style.display!='block') {
document.getElementById('id').style.display="block";}
else {document.getElementById('id').style.display="none"}
}

</script>

>   
> `<li><a onClick="toggle('Punkt1')"`{:.language-html}  
  
  
Sieht gar nicht so schlecht aus, ich sehe dass du verstanden hast was ich meine :)  
  
Aber lass die Anführungszeichen um "id" weg, denn an diese Stelle willst du ja die Variable/den Paramter "id" einfügen, und nicht den String "id". In deinem momentanen Script wird nach einem Element mit der id "id" geschaut, das es sehr wahrscheinlich nicht gibt.  
  
Dann beachte die Klammersetzung bei if (die ist bei dir noch fehlerhaft, wenn du genau hinguckst):  
  
~~~javascript
  
if(Bedingung==True)  
{  
 anweisung1;  
}  
else  
{  
 anweisung2;  
}  

In diesem Fall kannst du sogar die geschweiften Klammern (nicht die runden Klammern ;) ) weglassen, denn es folgt ja nur EIN Befehl auf if bzw auf else:

  
if(Bedingung==True)  
 anweisung1;  
else  
 anweisung2;  

Und das wärs auch schon. Habs natürlich immer noch nicht getestet, aber hab selbst so eine Funktion im Einsatz die genau so funktioniert.
Und da darfst natürlich gerne mit appendChild etc. herumspielen. Man sagte mir, dass, sobald die Anforderungen ein bisschen steigen, ist man damit besser bedient.

Du musst übrigens noch den Anchor schließen. Ich denke aber du hast das schon gemacht und hier nur nicht reinkopiert.
Eine JavaScript-Funktion lässt sich übrigens auch folgendermaßen aufrufen:

<a href="javascript:funktionsname('parameter1', 122.45);">test</a>
Hat den Nachteil, dass der Benutzer in der Statusleiste seines Browsers den teilweise elend langen Link mitsamt "javascript:" vornedran zu sehen bekommt.

Liebe Grüße
Tomar

[Tomar]

Nochmal ich,

Dann beachte die Klammersetzung bei if (die ist bei dir noch fehlerhaft, wenn du genau hinguckst):

Und wenn ICH genau hingeguckt hätte, dann wäre mir aufgefallen dass die Klammersetzung durchaus richtig ist. Es fehlt nur ein Semikolon im else-Zweig ;)

Lg
Tomar

[günter .g]

Danke für deine hilfe Tomar.
Bin mittlerweile selbst auf die überflüssigen Anführungszeichen bei "id" gekommen und alles funktioniert prima.

ohne dich wär ich nicht weit gekommen^^

[günter g.]

Gut eine frage hätt ich dann doch noch:

Ich hab jetzt eine funktion geschrieben die bei <body onLoad="Function('id')">

prüft ob das angesprochene div geschlossen oder offen ist.
Kann ich der funktion nun mehre "id's" gleichzeitig übergeben?
also in der art von:

<body onLoad="Function('id1','id2','id1')">

Oder gehört das total anders realisiert?

[Tomar]

Hi

freut mich wenn ich dir helfen konnte.

<body onLoad="Function('id1','id2','id1')">

Oder gehört das total anders realisiert?

Nicht "total" anders. Was du hier machen willst, sind mehrere Parameter zu übergeben. Deine Funktion nimmt momentan aber nur einen Parameter an.
Wenn du weißt, du wirst IMMER maximal 3 IDs übergeben wollen, dann kannst du deiner Funktionsdefinition auch 3 Parameter "schenken":

function toggle(id1, id2, id3) { ... }

Aber ist die Anzahl der zu übertragenden IDs variabel, so wirds ein wenig knifflig.
Eine Idee: Übergebe deine IDs in EINEM Parameter in der Form von "punk1,punkt2,punkt3,punkt4,punkt5,...,punktn". Dein JavaScript-Code muss diese dann anhand des Kommata trennen: JavaScript-Funktion "split".
Diese Funktion hat den Vorteil, dass es gleich ein Array erzeugt, das sich sehr gut mit der for oder for-in-Schleife durchlaufen lässt. Das for-in entspricht einer "foreach"-Schleife, falls dir das etwas sagt.

Lg
Tomar

[Detlef G.]

Hallo Tomar

Aber ist die Anzahl der zu übertragenden IDs variabel, so wirds ein wenig knifflig.
Eine Idee: Übergebe deine IDs in EINEM Parameter in der Form von "punk1,punkt2,punkt3,punkt4,punkt5,...,punktn". Dein JavaScript-Code muss diese dann anhand des Kommata trennen: JavaScript-Funktion "split".

Das wäre unnötig kompliziert, wie uns das Archiv verrät: Element ein-, ausblenden

Auf Wiederlesen
Detlef

[Tomar]

Hi

Das wäre unnötig kompliziert, wie uns das Archiv verrät: Element ein-, ausblenden

Ich muss zugeben, dass ich diese Methode gerade zum ersten mal sehe. Denke, damit ist günter g. zufrieden :) Und auch mir hilft das weiter. Danke!

Lg
Tomar

[henman]

hallo,

-Bei Seitenaufruf alle divs auf class="geschlossen" stellen. (damit user   ohne javascript auch was sehen sind sie standart auf class="geöffnet"

z.B. :<body onload="zuklappen()">
Die Funktion "zuklappen()" sollte/kann dann per getElementById auf die entsprechenden div-elemente zugreifen und sie "zuklappen".

-Wenn man auf den entsprechenden Menüpunkt klickt soll die funktion einfach umschalten. Also wenn "geschlossen" ist soll es sich ändern auf "geöffnet" und umgekehrt.

fast genauso wie oben, nur das du per if-Abfrage noch prüfen musst, ob der Menüpunkt schon offen ist oder nicht.

cu