# DIV Box > Inhalte austauschen



## blackrose4me (9. Juni 2008)

Hallöchen zusammen =)

Ich hätte do mal ein Problem, welches ich seit ein paar Tagen nicht ganz auf die Reihe bekomme, zumindest nicht so wie ich es eigentlich haben möchte :/

Vllt könnt ihr mir ja helfen, würde mich sehr darüber freuen

*Erstmal mein Codeschnipsel *


```
<script> 
function opentopnavdivs(navid) 
{ 
	 
	if (document.getElementById('suche').style.display =='visible'){ 
	  document.getElementById('suche').style.display ='visible'; 
	  document.getElementById(login).style.display ='none'; 
	} else { 
	  document.getElementById('suche').style.display ='none'; 
	  document.getElementById(login).style.display ='visible'; 
	} 
	 
} 
</script>  


<div id="suche" style="display:none;"> 
<form name="search_form" action="Such-Anfrage.htm" method="get" style="margin:0px;"> 
	<table> 
		<tr> 
		  <td valign="middle"><input style="font-family:Tahoma; color:#5A5A5C; line-height:180%; font-size:13px;" type="Text" name="suche" size="36" value="<?php echo($_POST["suche"]); ?>"></td> 
		  <td valign="middle" style="padding-left:3px;"><img src="/img/suche_hover.jpg"></td> 
		</tr> 
	</table> 
</form> 
</div>

<div id="login" style="display:visible;"> 
<form name="login" action="http://www.test.de/login.htm" method="post" style="margin:0px;"> 
	<table> 
		<tr> 
			  <td valign="middle"><img src="/img/login_hover1.jpg"></td> 
			  <td valign="middle"><input style="font-family:Tahoma; color:#5A5A5C; line-height:180%; font-size:13px; padding-left:3px;" type="Text" name="login"  value="<?php echo($_REQUEST["login"]); ?>" size="9"></td> 
			  <td valign="middle" style="padding-left:3px;"><img src="/img/pw_hover1.jpg"></td> 
			  <td valign="middle"><input style="font-family:Tahoma; color:#5A5A5C; line-height:180%; font-size:12,px; padding-left:3px;" type="password" name="pw" value="<?php echo($_GET["pw"]); ?>" size="9"></td> 
			  <td valign="middle" style="padding-left:3px;"> 
					<button type="submit" style="background-color:#4084D2; border-style:none;width:32px;"> 
				    <table border="0" cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;height:21px;"> 
					  <tr> 
						<td><img src="/img/go_hover.jpg"></td> 
					  </tr> 
					</table> 
					</button> 
			  </td> 
		 </tr> 
	 </table> 
 </form> 
</div>
```

*Was ich eigentlich möchte, aber noch nicht 100%ig funktioniert:*
Ich habe eine kleine Div Box in meiner Index, in der 2 Buttons sind die mit Javascript zusammenarbeiten >> Buttons > Suche und Login
Standardmäßig ohne Betätigung eines Buttons soll mein Login in der Div Box erscheinen
Wenn Button 1 gedrückt, dann Login in meine DIV Box und Suche wird ausgeblendet
Wenn Button 2 gedrückt, dann Such-Funktion in meiner Box und Login wird ausgeblendet

Jedoch funktioniert mein Code iwie nicht, und ich verstehe nicht ganz warum, habe auch schon einiges ausprobiert die letzten Tage, jedoch bisher nicht wirklich mit großen Erfolg  

*Weiß jemand Rat?*


----------



## Quaese (9. Juni 2008)

Hi,

zunächst einmal gibt es keinen Wert *visible* für die CSS-Eigenschaft *display*. Stattdessen wird im Zusammenhang mit einem DIV im allgemeinen *block* verwendet.

Weiterhin hast du einen Fehler in deiner if-Bedingung. Das Suchen-Element soll eingeblendet werden, wenn es nicht sichtbar ist.

Zuletzt muss *login* in Anführungszeichen steht, da es als ID-String an *getElementById* übergeben wird.

```
function opentopnavdivs(navid){
    if (document.getElementById('suche').style.display =='block'){
      document.getElementById('suche').style.display ='none';
      document.getElementById('login').style.display ='block';
    } else {
      document.getElementById('suche').style.display ='block';
      document.getElementById('login').style.display ='none';
    }
}
```
Ciao
Quaese


----------



## blackrose4me (11. Juni 2008)

Dankeschöö für deine Antwort 
Werde ich morgen sofort mal ausprobieren ^^

Momentan habe ich es mittels PHP gelöst, aber das ist in diesem Gebrauch nicht wirklich Vorteilhaft x) Von daher ist hier noch Verbesserungspotenzial mittels JavaScript von nöten


----------

