# OnClick - 2 Divs ausblenden, 1 Div einblenden



## waswiewo (15. Mai 2010)

Guten Tag,

ich bastel grade an einem kleinen Schnipsel..

Ich Habe ein Div. In diesem Div liegt ein verlinktes Bild. Beim klicken auf das Bild soll das Div durch ein darüber liegendes, verstecktes Div ersetzt werden. Gleichzeitig soll ein Weiteres Div ausgeblendet werden. Ich habe im Netzt schon ein wenig gefunden und versucht ein wenig umzuschreiben, nur passiert da nichts =)

Hier der Code:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title>lala</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="main.css" />

<script type="text/javascript">
function ein() {
 if(document.getElementById('einklappen').style.dispay=='block') {
  document.getElementById('einklappen').style.display='none';
  document.getElementById('ausklappen').style.display='block';
  document.getElementById('ein-ausklappen').style.display='none';
 }
}

function aus() {
 if(document.getElementById('ausklappen').style.dispay=='none') {
  document.getElementById('einklappen').style.display='block';
  document.getElementById('ausklappen').style.display='none';
  document.getElementById('ein-ausklappen').style.display='block';
 }
}
</script>

</head>
<body>


<div id="header">
	<img src="Bilder/logo.png" alt="Logo" />
	<div id="sprachauswahl">
		<img src="Bilder/sprache-1.png" alt="" /><a href="#"><img src="Bilder/deutsch.png" alt="" onmouseover="this.src='Bilder/deutsch-over.png'" onmouseout="this.src='Bilder/deutsch.png'" /></a><a href="#"><img src="Bilder/englisch.png" alt="" onmouseover="this.src='Bilder/englisch-over.png'" onmouseout="this.src='Bilder/englisch.png'" /></a><img src="Bilder/sprache-2.png" alt="" />
	</div>
</div>

<div id="navi-background">
	<div id="navi-bg">
		<img src="Bilder/videowerbung.png" onmouseover="this.src='Bilder/videowerbung-over.png'" onmouseout="this.src='Bilder/videowerbung.png'" alt="Videowerbung" /><img src="Bilder/puffer.png" alt="Puffer" /><img src="Bilder/grafikwerbung.png" onmouseover="this.src='Bilder/grafikwerbung-over.png'" onmouseout="this.src='Bilder/grafikwerbung.png'" alt="Grafikwerbung" /><img src="Bilder/puffer.png" alt="Puffer" /><img src="Bilder/textwerbung.png" onmouseover="this.src='Bilder/textwerbung-over.png'" onmouseout="this.src='Bilder/textwerbung.png'" alt="Textwerbung" />

		<div id="einklappen">
		<a href="#" onclick="ein()"><img src="Bilder/einklappen.png" onmouseover="this.src='Bilder/einklappen-over.png'" onmouseout="this.src='Bilder/einklappen.png'" alt="" /></a>
		</div>

		<div id="ausklappen">
		<a href="#" onclick="aus()"><img src="Bilder/ausklappen.png" onmouseover="this.src='Bilder/ausklappen-over.png'" onmouseout="this.src='Bilder/ausklappen.png'" alt="" /></a>
		</div>

	</div>
</div>

<div id="ein-ausklappen">
	<div id="contend"></div>

		<div id="link">
			<a href="#"><img src="Bilder/funktionen.png" onmouseover="this.src='Bilder/funktionen-over.png'" onmouseout="this.src='Bilder/funktionen.png'" alt="" /></a><a href="#"><img src="Bilder/kaufen.png" onmouseover="this.src='Bilder/kaufen-over.png'" onmouseout="this.src='Bilder/kaufen.png'" alt="" /></a>
		</div>
	</div>

</body>
</html>
```

Hab ich da irgendwas falsch abgeändert? =)

Mfg waswiewo


----------



## Quaese (17. Mai 2010)

Hi,

du hast Tippfehler in deinen if-Bedingungen. Du schreibst dort *dispay* statt *display*.

Ausserdem solltest du die if-Bedinungen dahingehend anpassen, dass sie mit den anfänglich unbestimmten Zuständen (kein style direkt im Element) umgehen können.
Weiterhin wirst du in der zweiten if-Bedingung ebenfalls prüfen müssen, ob der Aufklappen-Button sichtbar ist und darauf reagieren.

```
function ein() {
 if(document.getElementById('einklappen').style.display=='block' || document.getElementById('einklappen').style.display=='') {
  document.getElementById('einklappen').style.display='none';
  document.getElementById('ausklappen').style.display='block';
  document.getElementById('ein-ausklappen').style.display='none';
 }
}

function aus() {
 if(document.getElementById('ausklappen').style.display=='block' || document.getElementById('ausklappen').style.display=='') {
  document.getElementById('einklappen').style.display='block';
  document.getElementById('ausklappen').style.display='none';
  document.getElementById('ein-ausklappen').style.display='block';
 }
}
```
 
Ciao
Quaese


----------



## waswiewo (17. Mai 2010)

Hi,

danke für die klasse Hilfe! Funktioniert so einwandfrei..

Habe mehrmals nach Tippfehlern gesucht, aber keine gefunden. Warscheinlich habe ich schon zu lange vor dem Bildschirm gesessen xD

Vielen Dank nochmal 

mfg waswiewo

##### E D I T:
Könnte man das ein und ausblenden zusätzlich mit nem 2 Sekunden Fade versehen? Oder ist dies zu kompliziert?


----------

