CSS / Tipps / Text verstecken und anzeigen [IE|M|O]

von: Werner Zenk

Seiteninhalt (Texte,Bilder, ...) mit CSS verstecken
und mit JavaScript wieder anzeigen.

Beispiel:
» Text Eins anzeigen
» Text Zwei anzeigen


Quelltext:
<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>

» <a href="javascript:anzeigen('eins');">Text Eins anzeigen</a>
<div style="display: none;" id="eins">
   Viel Text viel text viel text ...
</div>

<br>

» <a href="javascript:anzeigen('zwei');">Text Zwei anzeigen</a>
<div style="display: none;" id="zwei">
   Viel mehr text ...
</div>
eins zwei = ID - Für jeden DIV-Block verwenden Sie eine eigene ID.


Tipp: Der FAQ Generator erstellt eine solche Funktion automatisch.

 

 

DIV-Block automatisch schließen

Das folgende JavaScript öffnet nur den angeklickten DIV-Block
alle anderen werden automatisch geschlossen.

<script type="text/javascript">
function zeige(ID) {

 for (var zaehler = 1; zaehler <= 5; zaehler++) {
  if (document.getElementById("u" + zaehler).style.display == "block") {
   document.getElementById("u" + zaehler).style.display = "none";
  }
 }
 document.getElementById(ID).style.display = "block";
}
</script>

» <a href="javascript:zeige('u1');"> 1 anzeigen </a> <br>
<div style="display: none;" id="u1">
   Viel Text viel text viel text ...
</div>

» <a href="javascript:zeige('u2');"> 2 anzeigen </a> <br>
<div style="display: none;" id="u2">
   Viel Text viel text viel text ...
</div>

» <a href="javascript:zeige('u3');"> 3 anzeigen </a> <br>
<div style="display: none;" id="u3">
   Viel Text viel text viel text ...
</div>

» <a href="javascript:zeige('u4');"> 4 anzeigen </a> <br>
<div style="display: none;" id="u4">
   Viel Text viel text viel text ...
</div>

» <a href="javascript:zeige('u5');"> 5 anzeigen </a> <br>
<div style="display: none;" id="u5">
   Viel Text viel text viel text ...
</div>
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?
Kommentare: 14 » aufmachen   
David:
Ist es möglich so zu machen, dass beim anklicken eines Elements andere wieder versteckt werden?

Werner:
Ja, relativ einfach:
<script type="text/javascript">
function schließen(){
 document.getElementById("eins").style.display='none';
 document.getElementById("zwei").style.display='none';
}
</script>

<a href="javascript:schließen(); anzeigen('eins');">Text Eins anzeigen</a>
<div style="display: none;" id="eins">
   Viel Text viel text viel text ...
</div>
Eine anderes Beispiel (was mir besser gefällt)
<script type="text/javascript">
 function anzeigen(das){
  if (document.Form.versteckt.value != "") {
   var ID = document.Form.versteckt.value;
   document.getElementById(ID).style.display='none';
   document.Form.versteckt.value = "";
  }

  if(document.getElementById(das).style.display=='none') 
  {
   document.getElementById(das).style.display='block'; 
   document.Form.versteckt.value = das;
  }
  else document.getElementById(das).style.display='none';}
</script>

<form name="Form">
 <input type=hidden name="versteckt">
</form>

» <a href="javascript:anzeigen('eins');">Text Eins anzeigen</a>
<div style="display: none;" id="eins">
   Viel Text viel text viel text ...
</div>


Björn:
Deine Lösung ist ein guter Ansatz, aber ich habe immer noch nicht rausgefunden, wie man beim Öffnen eines Elements, automatisch alle (egal wie viele) anderen wieder versteckt. Dies muss doch auch relative gehen und nicht nur mit genauer ID-Bezeichnung, oder?

Werner:
document.getElementsByTagName("p")[0].style.display="none";

Rolf:
Vielen Dank, das hat mir sehr geholfen! Auch wenn ich nun nach langem hin und her mit php wieder bei js gelandet bin, aber es ist einfach schneller! Danke

Esel:
Entschuldigung, falls die Anfängerfrage blöd ist, aber gibt es auch eine Möglichkeit, mittels PHP die Notwendigkeit von eingeschaltetem JS beim Besucher zu unterbinden? Nicht jeder will beim Surfen auf seinem Rechner ein Risiko eingehen. p>Werner:
Nein, PHP kann nicht auf dem Rechner des Besuchers zugreifen.

mike:
Ist es möglich eine zusätzliche Funktion (Button oder Link) einzufügen, die alle Elemente gleichzeitig öffnet und schließt?

Jaro:
Sehr gute Hilfe Find die Seite und die Tipps echt Klasse.

Hallo und guten Tag:
Markus:Zum Beispiel von Werner: Werner wie reallisiert man ein z.B. rotes Kreuz für jedes einzelne Fenster was geöffnet ist, um es wieder zu schliessen? Danke für die Webseite hier, sehr hilfreich.

Werner:
Ich weiß leider nicht genau was du meinst? Jedes Browser-Fenster unter Windows hat doch ein Kreuz zum schließen!

Markus:
Hallo Werner, Nein..ich meine im geöffneten Element..das heisst ich möchte aufgrund deines Scripts in jedes geöffnete Element eine Funktion einbauen um es wieder zu schliessen bzw. wieder zu verstecken. Z.B als Text..(Kann ich einen Webseiten Link posten wo ich das gesehen habe ?)Dann ist es möglicherweise einfacher was ich meine zu verstehen.

Werner:
Villeicht etwa so...
<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';
 }
}

//
function ausblenden(das) {
 document.getElementById(das).style.display='none';
}
</script>

» <a href="javascript:anzeigen('eins');">Text Eins anzeigen</a>
<div style="display: none; border: solid 5px #0000FF; background-color: #FFFFA4; width: 300px; padding: 5px;" id="eins">
<div style="text-align: right;"><a href="javascript:ausblenden('eins')"><span style="color: #FF0000; font-weight: bold;">X</span></a></div>
   Viel Text viel text viel text ...
</div>
Das CSS müsstest du deinen wünschen entsprechend anpassen.

Markus:
Guten Abend Werner, genauso Vielen Dank dafür.

Philipp:
also ich bin sprachlos.ist jetzt 14.36uhr. bin heute nach/morgen um 05.00uhr aus der disko heimgekomen und wollte eigentlich schlafen,aber das geht garnicht bei der genialen website. www.lf23.de

Volker:
Hallo,kann man mit Javascript auf den versteckten Abschnitt einer neuen Seite verlinken (seite2.html#abschnitt1) und den dann gleichzeitig öffnen?onclick="anzeigen('infoX')" zusätzlich zum href funktioniert ja nur bei Sprunglinks auf der gleichen Seite.Grüße, Volker

Werner:
Das funktioniert mit Javascript sogar relativ einfach. Wenn du schon etwas JS kannst hilft dir folgendes:
<a href="test.htm?name=eins">Link</a>

---- 


<div id="eins" style="display: none;">
Hallo Welt!
</div>

<script type="text/javascript">
if (window.location.search != "") {
 var Wort = window.location.search.split("="); 
 document.getElementById(Wort[1]).style.display='block';
}
</script>


Volk:
Hallo Werner, ich mache die seiteninternen Links mit #infoX und nicht mit ?...Kann ich das irgendwie mit location.hash lösen?Gruß, Volker

Volker:
Hallo Werner,als Ergänzung (ich bin JS-Anfänger):<script type="text/javascript">if (window.location.hash != "") { var hash = location.hash; hash = hash.replace(/^#/, '');document.getElementById(hash).style.display='block';}</script>Das funktioniert aber nicht.

Werner:
<a href="test.htm#eins">Link</a>
---- 
<div id="eins" style="display: none;">
Hallo Welt!
</div>

<script type="text/javascript">
if (window.location.hash) {
 var myhash = window.location.hash;
 myhash = myhash.replace(/^#/, '');
 document.getElementById(myhash).style.display='block';
}
</script>
Funktioniert aber nur wenn man den Link klickt und danach die Seite aktualisiert (also nicht praktikabel!) Leider wird der Hash nur auf der aktuellen Seite ausgelesen! Mein Vorschlag wäre die Links zu erweitern:
<a href="test.htm?name=eins#one">Link</a>
---- 
<a name="one"></a>
<div id="eins" style="display: none;">
Hallo Welt!
</div>

<script type="text/javascript">
if (window.location.search != "") {
 var Wort = window.location.search.split("=");
 document.getElementById(Wort[1]).style.display='block';
}
</script>
name und id müssen unterschiedliche Namen haben (name="one", id="eins").

Volker:
Danke Werner, split() funktioniert.Gruß, Volker
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Seitenrand der Webseite ändern  Bilder übereinander legen (stapeln) - Mit CSS (z-index) können Sie Objekte (Bilder, Text, Container, ...) übereinander legen (stapeln).  CSS Hyperlink #42  CSS Befehle: Klassifizierung  CSS Befehle: Abstand  Vertikale Linie erstellen  Große Buchstaben mit CSS  Horizontale Linie mit CSS einfärben  Wasserzeicheneffekt - Hintergrundbild fixieren  CSS Befehle: Hintergrund  CSS Hyperlink #26  Angaben für Bereiche  CSS Hyperlink #22  Scrollende Tabelle  CSS Hyperlink #39  Text und Bild auf Höhe der Bildmitte zentrieren  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner