mit onclick mehrere links öffnen?

[Javanoob]

Guten Abend,

in Sachen JavaScript bin ich blutiger Anfänger bzw. habe ich mich damit noch nicht wirklich befasst.

Für eine Website wollte ich aber Infos beim Klick auf einen Link einblenden bzw. wieder ausblenden.

Habe das auch mit Hilfe des Internts und einem Tutorial hinbekommen, das ganze sieht so aus:

  
<h4>  
 <a onclick="return tricker('1')" href="javascript:void(0)">  
  Zum Öffnen HIER klicken  
 </a>  
</h4>  
						  
<div id="1" style="display:none">  
Inhalt der eingeblendet werden soll  
</div>  
  
<h4>  
 <a onclick="return tricker('2')" href="javascript:void(0)">  
  Zum Öffnen HIER klicken  
 </a>  
</h4>  
						  
<div id="2" style="display:none">  
Inhalt der eingeblendet werden soll  
</div>  
  
U.s.w.

Ich habe insgesamt 16 Punkte davon. Deshalb würde ich dem Benutzer gerne die Möglichkeit geben mit nur einem Klick alle "Inhaltsfenster" gleichzeitig zu öffnen bzw. zu schliessen.

Ich hab schon rumprobiert, aber bin noch nicht zum gewünschten Ergebniss bekommen, wahrscheinlich gibt es dafür eine ganz simple Lösung, wer kann mir helfen?

[javanoob]

Vermutlich braucht ihr auch noch die javascript-datei, die ich im header eingebunden habe.

  
function tricker(a){  
  var e=document.getElementById(a);  
  if(!e)return true;  
  if(e.style.display=="none"){  
    e.style.display="block"  
  } else {  
    e.style.display="none"  
  }  
  return true;  
}

[Der Martin]

Hallo,

in Sachen JavaScript bin ich blutiger Anfänger bzw. habe ich mich damit noch nicht wirklich befasst.

das ist absolut keine Schande, und wenn du dich mit Javascript einlassen _willst_, dann möchte ich dich nicht davon abbringen. Aber ...

Für eine Website wollte ich aber Infos beim Klick auf einen Link einblenden bzw. wieder ausblenden.

... DAS würde ich rein mit HTML und CSS lösen. Javascript ist dafür nicht nötig. Voraussetzung dafür ist nur, dass das klicksensitive Element und die Box, die dann eingeblendet wird, in der Dokumentstruktur in einem eindeutigen Verhältnis zueinander stehen (z.B. Nachkommen von einem gemeinsamen Vorfahrenelement sind).

Die klickbaren Felder modelliere ich als Labels eines Checkbox-Elements, und das Ein- und Ausblenden eines weiteren Elements mache ich vom :checked-Zustand der Checkbox abhängig. Die Checkbox selbst bleibt dabei unsichtbar.

Grobes Modell, ungetestet:

<ul id="teaser-list">  
 <li>  
  <input type="checkbox" id="check01">  
  <label for="check01"><span class="expand">Mehr Information ...</span><span class="collapse">weg mit der Information ...</span></label>  
  <p>Hier könnte noch viel, viel mehr Text stehen, der dann  
  erst bei Bedarf eingeblendet wird. Im initialen Zustand  
  ist er erstmal unsichtbar.</p>  
 </li>  
 ...  
</ul>

#teaser-list  
 { list-style-type: none;  
 }  
#teaser-list input  
 { display: none;  /* checkbox wird unsichtbar, funktioniert durch das label-Element dennoch */  
 }  
#teaser-list p  
 { display: none;  /* p-Element per Default unsichtbar */  
 }  
#teaser-list input:checked ~ p  
 { display: block; /* p-Element sichtbar, wenn Checkbox angekreuzt */  
 }  
#teaser-list span.collapse  
 { display: none;  
 }  
#teaser-list span.expand  
 { display: inline;  
 }  
#teaser-list input:checked ~ span.collapse  
 { display: inline;  
 }  
#teaser-list input:checked ~ span.expand  
 { display: none;  
 }

<h4>
<a onclick="return tricker('1')" href="javascript:void(0)">
  Zum Öffnen HIER klicken
</a>
</h4>

Benutze bitte nur dann ein h4-Element, wenn du tatsächlich 4 Überschriftsebenen brauchst. Ich halte das für sehr unwahrscheinlich. Solltest du h4 nur wegen des Erscheinungsbilds gewählt haben: Vergiss das bitte wieder. Wähle das Markup nur nach der Struktur des Dokuments, für das Ausshen ist CSS zuständig.

<div id="1" style="display:none">

ID-Werte dürfen nicht mit einer Ziffer beginnen (außer HTML 5).

Ich habe insgesamt 16 Punkte davon.

Deswegen habe ich oben schon eine Liste als Container angedeutet. ;-)

Deshalb würde ich dem Benutzer gerne die Möglichkeit geben mit nur einem Klick alle "Inhaltsfenster" gleichzeitig zu öffnen bzw. zu schliessen.

Oh. Zusätzlich zur Möglichkeit, sie einzeln ein- und auszublenden? Das wäre eine andere Aufgabenstellung, die dann tatsächlich Javascript erfordert. Da müsstest du -von meinem Beispiel ausgehend- in einer Schleife die checked-Eigenschaft aller relevanten inputs auf true oder false setzen.

So long,
 Martin