ein-/ und ausblende von Objekten! Komme nicht weiter

Harry H

Hallo Forum,
durch hilfe in dem Html Forum bin ich schon ein ganzes Stück weiter gekommen.
Das habe ich bis jetzt geschrieben:

HTML

<html><head><title>ein/ausblenden</title> 


<script type="text/javascript"> 
function show (text) { 
if (document.getElementById) 
document.getElementById("Text1").style.visibility = text; 
} 
</script> 


<script type="text/javascript"> 
function show2 (text) { 
if (document.getElementById) 
document.getElementById("Text2").style.visibility = text; 
} 
</script> 


</head><body> 


<h1 id="Text1" style="visibility:hidden">Anzeige Text1</h1> 




oben erscheint text 1</p> 




[url='javascript:show('visible'); javascript:show2('hidden')']Einblenden![/url]</p>  






<h1 id="Text2" style="visibility:hidden">Anzeige Text2</h1></p> 




unten erscheint text 2</p> 




[url='javascript:show2('visible'); javascript:show('hidden')']Einblenden2![/url]</p> 


</body></html>

Alles anzeigen

Es funktioniert einwandfrei. Nur wird es ein wenig unübersichtlich wenn ich nicht nur 2 sondern z.B. 10 Texte habe. Gibt es eine elegantere Lösung?
Freue mich über jede Hilfe
mfg
Harry

GreenRover

hmm eine einfach lösung währe es, ein funtion zu bauen, die alle ID`s auf 0 setzt, auser die übegeben

Code

<script type="text/javascript">
function show ( id ) 
{
 var id_s = new Array( "Text1", "Text2", "Text3");


 for (i=0; i< id_s.length; i++)
 {
  document.getElementById(id_s[i]).style.visibility = "hidden";
 }
 document.getElementById(id).style.visibility = "visible";
}
</script>


[url='javascript:show('Text1')']Einblenden1![/url]


[url='javascript:show('Text2')']Einblenden1![/url]

Alles anzeigen

baloo

um alles noch ein wenig übersichtlicher zu machen, definierst du eine css klasse mit visibility: hidden und eine mit visibility: visible (bzw. display: none und display: [jenachdem]), dann änderst du die klassen mit document.getElementById(id).className = 'ein';

Tags