Inhalt aufklappen mit JavaScript und html

[zoom]

Moin!

Ich stelle auf einer Seite mehrere Bilder dar. Dazu möchte ich per Klick auf das Bild weitere Informationen zur Verfügung stellen. Ich habe folgenden Code erstellt:

<html>
<style type="text/css">
	#x1, #x2, #x3, #x4, #x5, #x6, #x7 {
		display: none;
	}
</style>
</head>
<script type="text/javascript" language="JavaScript1.2">
var yes = false;
function flip(num) 
{ 
	if (yes)
	{
		document.getElementById('x'+num).style.display = 'none';
		yes = false;
	}
	else
	{
		document.getElementById('x'+num).style.display = 'block';
		yes = true;
	}
} 
</script> 
<body>
<div>Bild 1</div>
<a href="javascript: void()" onclick="flip(1)"><img src="bild1.jpg" alt="bild1" /></a>
<div id="x1">Inhalt zu Bild 1</div><br />
<div>Bild 2</div>
<a href="javascript: void()" onclick="flip(2)"><img src="bild2.jpg" alt="bild2" /></a>
<div id="x2">Inhalt zu Bild 2</div><br />
<div>Bild 3</div>
<a  href="javascript: void()" onclick="flip(3)"><img src="bild3.jpg" alt="bild3" /></a>
<div id="x3">Inhalt zu Bild 3</div><br />
<div>Bild 4</div>
<a  href="javascript: void()" onclick="flip(4)"><img src="bild4.jpg" alt="bild4" /></a>
<div id="x4">Inhalt zu Bild 4</div><br />
<div>Bild 5</div>
<a href="javascript: void()" onclick="flip(5)"><img src="bild5.jpg" alt="bild5" /></a>
<div id="x5">Inhalt zu Bild 5</div><br />
<div>Bild 6</div>
<a href="javascript: void()" onclick="flip(6)"><img src="bild6.jpg" alt="bild6" /></a>
<div id="x6">Inhalt zu Bild 6</div><br />
<div>Bild 7</div>
<a href="javascript: void()" onclick="flip(7)"><img src="bild7.jpg" alt="bild7" /></a>
<div id="x7">Inhalt zu Bild 7</div>
</body>
</html>

Nun zu dem Problem, was sich dabei für mich ergibt. Wenn man auf Bild 1 klickt, dann öffnen sich darunter wie gewünscht die Informationen. Die Variable yes ist nun allerdings true. Das bedeutet, dass weitere Information von zB Bild 2 nicht mit einem Klick geöffnet werden können. Dazu muss man die Variable erst wieder in den false-Zustand bringen.
Wie muss ich nun den Code verändern. Ich möchte, dass alle Information unabhängig voneinander geschlossen und geöffnet (und umgekehrt) werden können. Ich habe irgendwie ein keine Idee. Kann mir jemand helfen?

Gruß zoom

 

[s23]

Indem du nicht eine eigene Abfrage mittels "yes" kreierst, sondern einfach den Status des Elementes abfragst.

Konkret:

if (document.getElementById('x'+num).style.display = 'none'){...

 

[zoom]

Sorry, aber das verstehe ich noch nicht ganz. Ich stehe vielleicht auf dem Schlauch...
Könntest du bitte mal den kompletten Code der Funktion posten? Danke.

 

[s23]

Sorry, aber das verstehe ich noch nicht ganz. Ich stehe vielleicht auf dem Schlauch...
Könntest du bitte mal den kompletten Code der Funktion posten? Danke.

Da stehst du aber gewaltig auf dem Schlauch, was? Die 5 Zeilen Code jetzt nicht anpassen zu können

<script type="text/javascript" language="JavaScript1.2">
function wechsel(wert) 
{ 
  if(document.getElementById(wert).style.display = 'none';){
	document.getElementById(wert).style.display = 'block';
  }else{
        document.getElementById(wert).style.display = 'none';
  }
}
</script>

Dein Aufruf erfolgt nun via:

<a href="javascript:wechsel('x1');"><img src="bild1.jpg" alt="bild1" /></a><div id="x1">Inhalt zu Bild 1</div>

HTH

 

[zoom]

Ok, den Sinn der Funktion verstehe ich. Dennoch funktioniert das leider noch nicht. Die Infos werden beim Klick auf das entsprechende Bild leider nicht geöffnet. (Ich habe deinen Quellcode eins zu eins übernommen.) Muss vielleicht am Anfang noch definiert werden, dass das entsprechende div im none-Zustand ist? Oder reicht die Angabe aus den css?

Edit:
mein aktueller Code sieht so aus

<html>
<style type="text/css">
	#x1, #x2, #x3, #x4, #x5, #x6, #x7 {
		display: none;
	}
</style>
</head>
<script type="text/javascript" language="JavaScript1.2">
function wechsel(wert) 
{ 
  if(document.getElementById(wert).style.display = 'none';)
  {
		document.getElementById(wert).style.display = 'block';
  }
  else
  {
        document.getElementById(wert).style.display = 'none';
  }
}
</script>
<body>
<div>Bild 1</div>
<a href="javascript:wechsel('x1');"><img src="bild1.jpg" alt="bild1" /></a><div id="x1">Inhalt zu Bild 1</div>
<div>Bild 2</div>
<a href="javascript:wechsel('x2');"><img src="bild2.jpg" alt="bild2" /></a><div id="x2">Inhalt zu Bild 2</div>
<div>Bild 3</div>
<a href="javascript:wechsel('x3');"><img src="bild3.jpg" alt="bild3" /></a><div id="x3">Inhalt zu Bild 3</div>
</body>
</html>

 

[s23]

Ja, das Div muss natürlich ein Stil-Attribut bekommen, das auf "none" steht. Das hatte ich vergessen. Dann sollte es gehen.

 

[zoom]

Dann hilf mir doch bitte nochmal. Ich habe noch nicht so viel Ahnung von JavaScript. Beim Suchen nach style-Attributen für JavaScript bin ich zwar fündig geworden, ich konnte aber noch keine Lösung finden, die nun mein Problem behebt. Wie weise ich den Elementen x1 bis x7 am effektivsten ein display = none zu?

document.getElementById('x1').style.display = 'none';

Damit funktioniert es leider nicht. Außerdem wäre das ja nur das erste Element betreffend.

 

[s23]

Der Javascript-Quelltext muss nicht geändert werden. Du musst dein HTML-Quelltext wie folgt ändern:

<div id="x3" style="display:none;">Inhalt zu Bild 3</div>

Und das für jedes DIV-Element, welches du ansprechen willst.

 

[zoom]

In der css-Angabe habe ich das doch angegeben. (Siehe ersten Quellcode) Es funktioniert so aber nicht...

 

[s23]

Ja in der Tat, es sollte auch "document.getElementsByTagName" heißen im Javascript.

<html>
<style type="text/css">
	#x1, #x2, #x3, #x4, #x5, #x6, #x7 {
		display: none;
	}
</style>
</head>
<script type="text/javascript">
function wechsel(wert) 
{ 
  
  obj = document.getElementsByTagName("div");
		    if (obj[wert].style.display == 'block'){
		        obj[wert].style.display = 'none';
		    } else {
		        obj[wert].style.display = 'block';
		    }
}
</script>
<body>
<div>Bild 1</div>
<a href="javascript:wechsel('x1');"><img src="bild1.jpg" alt="bild1" /></a><div id="x1">Inhalt zu Bild 1</div>
<div>Bild 2</div>
<a href="javascript:wechsel('x2');"><img src="bild2.jpg" alt="bild2" /></a><div id="x2">Inhalt zu Bild 2</div>
<div>Bild 3</div>
<a href="javascript:wechsel('x3');"><img src="bild3.jpg" alt="bild3" /></a><div id="x3">Inhalt zu Bild 3</div>
</body>
</html>

HTH

 

[zoom]

Vielen Dank! Jetzt funktioniert es einwandfrei.

 

[Chu]

Na ich denke da hat sich jemand einiges an Karma verdient im schweiße des Angesichts