Div verstecken

[DaReaLSy]

Hey,

ich bin gerade dabei mir eine Art Lexikon zu programieren, so ähnlich wie das hier nur ohne stlye, so das es funktioniert und in der mitte des bildschirms positioniert ist.

Allerdings komm ich nciht so recht weiter, das ganze soll am Ende dynamisch erstellt werden, ein Formular habe ich dafür schon und das funktioniert auch so weit, nur an der Ausgabe scheiterts...

	for($i = 0; ($i <= lexikon::count()); $i++)
	{
		if($i == 0)
		{
			echo "<div id=\"lexikon\"> ";
		}
		echo "<script language=\"javascript\"> 
			function toggle() {
				var ele = document.getElementById(\"toggleText\");
				var text = document.getElementById(\"displayText\");
				if(ele.style.display == \"block\") {
			    		ele.style.display = \"none\";
					text.innerHTML = \"show\";
			  	}
				else {
					ele.style.display = \"block\";
					text.innerHTML = \"hide\";
				}
			} 
			</script>
			
				<a id=\"displayText\" href=\"javascript:toggle();\">$titel[i]</a> <== click Here
				<div id=\"toggleText\" style=\"display: none\"><p>$inhalt[i]</p></div>
		"; 
		if($i == 0)
		{
			echo "</div>";
		}
	}

Erläuterung:
- lexikon::count -> zählt datensätze inder Datenbank lexikon
- $titel[$i], $inhalt[$i] -> sind array-strings in denen sich aus der mysql datenbank titel und inhalt befinden
- div id="lexikon" -> ist dafür da das das Lexikon in der mitte des Bildschirms positioniert wird

Folgende probleme hab ich nun:
- es wird kein inhalt ausgegeben der angezeigt wird

könnt ihr mir helfen oder nen stups in die richtige richtung geben? bin gerade am verzweifeln

 

[Maniac]

<a id=\"displayText\" href=\"javascript:toggle();\">$titel[1]</a> <== click Here
                <div id=\"toggleText\" style=\"display: none\"><p>$inhalt[1]</p>

Hier gibts du den $titel und $inhalt ja feste Werte, die Keys musst du mit $i ersetzen.

 

[DaReaLSy]

jo das ist mir auch aufgefallen, hab ich einmal zum testen geändert, dann gibt der mir den inhalt auch aus aber wie immer nur in der ersten ausgabe die andere öffnet der gar nicht erst. ersetzte ich das durch "$i" erscheinen zwar die titel aber der die erste ausgabe gibt dann nur ein leeres div aus...

 

[Maniac]

Dann poste doch mal den Quellcode den er ausgibt, irgendwo muss ja ein Fehler sein.

 

[DaReaLSy]

Hier der HTML-Code den er ausgibt:

	<div id="lexikon"> <script language="javascript"> 
			function toggle() {
				var ele = document.getElementById("toggleText");
				var text = document.getElementById("displayText");
				if(ele.style.display == "block") {
			    		ele.style.display = "none";
					text.innerHTML = "show";
			  	}
				else {
					ele.style.display = "block";
					text.innerHTML = "hide";
				}
			} 
			</script>
			
				<a id="displayText" href="javascript:toggle();"></a> <== click Here
				<div id="toggleText" style="display: none"><p></p></div>
		</div><script language="javascript"> 
			function toggle() {
				var ele = document.getElementById("toggleText");
				var text = document.getElementById("displayText");
				if(ele.style.display == "block") {
			    		ele.style.display = "none";
					text.innerHTML = "show";
			  	}
				else {
					ele.style.display = "block";
					text.innerHTML = "hide";
				}
			} 
			</script>
			
				<a id="displayText" href="javascript:toggle();">Mein erster Artikel</a> <== click Here
				<div id="toggleText" style="display: none"><p>Hallo dies ist mein erster dynamischer Aritkel mit MySQL!</p></div>

		<script language="javascript"> 
			function toggle() {
				var ele = document.getElementById("toggleText");
				var text = document.getElementById("displayText");
				if(ele.style.display == "block") {
			    		ele.style.display = "none";
					text.innerHTML = "show";
			  	}
				else {
					ele.style.display = "block";
					text.innerHTML = "hide";
				}
			} 
			</script>
			
				<a id="displayText" href="javascript:toggle();">mein zweiter Artikel</a> <== click Here
				<div id="toggle();">mein zweiter Artikel</a> <== click Here
				<div id="toggleText" style="display: none"><p>Das ist mein zweiter Artikel zum testen des Skripts!</p></div>

 

[DaReaLSy]

update: hab das div lexikon um die for-schleife gesetzt jetzt wird alles im gleichen div ausgegeben das aufklappen bekomme ich aber immer noch nicht hin :/

 

[Maniac]

Das liegt daran das eine ID nur einmal im Dokument vorkommen darf. Ich würde den Zähler der Schleife mit an die ID hängen und das Javascript eben auch um diese ID erweitern.

 

[DaReaLSy]

Meinst du Lexikon? Das steht ja jetzt ausserhalb der for-schleife, das funktioniert, allerdings zeigt der immer noch nichts an... :/

	$titel = array();	
	$inhalt = array();	

	for($i = 0; ($i <= lexikon::count()); $i++)
	{
		$titel[$i] = lexikon::getTitel($i);
		$inhalt[$i] = lexikon::getInhalt($i);	
		
	}
	echo "<div id=\"lexikon\">";
	for($i = 0; ($i <= lexikon::count()); $i++)
	{


		echo "<script type=\"text/javascript\"> 
			function anzeigen(das) {
			if (document.getElementById(das).style.display=='none') 
			{
				document.getElementById(das).style.display='block';
			} 
			else 
				document.getElementById(das).style.display='none';
			{

}
} 
				
			} 
			</script>";
	
			echo"	
				<div onclick=\"javascript:anzeigen(\"show.'$i'\");\">
					<div id=\"displayText\" style=\"display: block; padding-bottom:10px; padding-top: 2px; padding-left:15px;\">$titel[$i]</div>
				</div>
				<div id=\"show.'$i'\" style=\"display: none\"><p>$inhalt[$i]</p></div>";

	}
	echo "</div>";
?>