• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

text beim klicken ein- und ausblenden

J

Jala

Neues Mitglied
Hallo, ich arbeite noch nicht so lange mit html und bin nun ein paar dinge am ausprobieren, doch nun scheitert es schon. Vielleicht kann mir jemand helfen?

Ich möchte das wenn man auf die Navipunkte klick, sich der Text einblendet (das tut er bereits) aber er soll sich auch wieder ausblenden wenn man nochmal darauf klickt.

hier meine Datei:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Headline</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px }
</style>
<style type="text/css">
@font-face { font-family:apercu; src:url(apercu.otf), url(apercu.otf); }
@font-face { font-family:apercu_bold; src:url(apercu_bold.otf), url(apercu_bold.otf); }
{
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
}

#ebenen {
position: absolute;
bottom: 80px;
left: 15px;
font-size: 12px;
font-family: 'Apercu_bold';
src:url (apercu_bold.otf);
color: #50afdb;
text-align: left;
line-height: auto;
z-index: 2;
overflow: auto;
}
#information {
position: absolute;
bottom: 50px;
left: 15px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
#agenda {
position: absolute;
bottom: 50px;
left: 90px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left; }
#colophon {
position: absolute;
bottom: 50px;
left: 145px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
#contact {
position: absolute;
bottom: 50px;
left: 220px;
font-size: 12px;
font-family: 'Apercu';
src:url (apercu_regular.otf);
color: #50afdb;
text-align: left;
}
</style>
<meta charset="UTF-8">
<script language="JavaScript" type="text/javascript">
<!--
function alleAusblenden(){
var elemente = document.getElementById("ebenen").getElementsByTagName("p");
for (var i = 0; i < elemente.length; i++) {
elemente.style.display = "none";
}
}
function einblenden(div){
alleAusblenden();
document.getElementById(div).style.display = "inline";
}

//-->
</script>
</head>
<body>
<div id="information" class="information"
<a href="#" onclick="einblenden('ebene1'); return false;"> information </a> </div>
<div id="agenda" class="agenda"
<a href="#" onclick="einblenden('ebene2'); return false;"> agenda </a></div>
<div id="colophon" class="colophon"
<a href="#" onclick="einblenden('ebene3'); return false;"> colophone </a></div>
<div id="contact" class="contact"
<a href="#" onclick="einblenden('ebene4'); return false;"> contact </a></div>
<div id="ebenen">
<p id="ebene1" style="display:none;">
information<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext
</p>
<p id="ebene2" style="display:none;">
agenda<br>
<br>
september 19<br>
book blindtext<br>
blindtext blindetext blindetext<br>
blinder text<br>
blinden texte<br>
text text text<br>
<br>
text<br>
text blind<br>
blind blind text
</p>

<p id="ebene3" style="display:none;">
colophon<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext

</p>

</p>

<p id="ebene4" style="display:none;">
contact<br>
<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
blindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext<br>
lindtext blindtext blindtext blindtext


</p>
</div>

</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Moin,
also erstmal finde ich, dass sowohl dein CSS als auch dein HTML ein wenig merkwürdig aussehen.
Beim CSS stimmt irgendwas mit den Klammern nicht, beim HTML fehlen auf jeden Fall die schließenden > bei den divs und irgendwo geht glaub ich ein p zu was nicht aufgeht.
Hab ich mich aber nicht weiter mit auseinander gesetzt, solltest aber ggf. nochmal die Grundlagen ein wenig festigen.
Lösen würde ich das ganze, wenn ich dich richtig verstanden habe wie folgt:
Code: 
<!DOCTYPE html>
<html>
  <head>
  <title>test</title>
  <script language="JavaScript" type="text/javascript">
  function toggleElement(element){
   document.getElementById(element).style.display = (document.getElementById(element).style.display == 'none') ? '' : 'none';
  }
  </script>
  </head>
  <body>
  <div id="buttons">
   <input type="button" name="btn_1" value="toggle 1" onclick="toggleElement('eins')"/>
   <input type="button" name="btn_2" value="toggle 2" onclick="toggleElement('zwei')"/>
   <input type="button" name="btn_3" value="toggle 3" onclick="toggleElement('drei')"/>
   <input type="button" name="btn_4" value="toggle 4" onclick="toggleElement('vier')"/>
  </div>
  <div id="eins" style="display:none;">
   <p>irgendwas1</p>
   <p>nochwas1</p>
  </div>
  <div id="zwei" style="display:none;">
   <p>irgendwas2</p>
   <p>nochwas2</p>
  </div>
  <div id="drei" style="display:none;">
   <p>irgendwas3</p>
   <p>nochwas3</p>
  </div>
  <div id="vier" style="display:none;">
   <p>irgendwas4</p>
   <p>nochwas4</p>
  </div>
  </body>
</html>
Das JS macht nicht anderes, als mit einer if (nur in der Kurzschreibweise) zu überprüfen, ob das div grad sichtbar ist oder nicht und dann immer den Zustand zu tauschen.
Der Rest sollte eigentlich klar sein.
Hoffe das hilft ein wenig weiter. :)
 
Zuletzt bearbeitet:
Super, vielen dank!

Aber nun habe ich noch eine Frage:
Wie mache ich das, dass wenn man auf link1 klickt (Inhalt 1 erscheint) dann klickt man auf link2 (Inhalt 2 erscheint) und nun sind beide Inhalte zu sehen. Was muss ich machen wenn ich möchte, dass wenn bereits ein Inhalt sichtbar ist und ich auf einen anderen link klicke, das der neue Inhalt erschein, aber auch das der alte Inhalt verschwindet?
 
Werbung:
Naja die logik dahinter ist die selbe, nur dass du einmal alle elemente mir ner For-Schleife durchgehen musst um sie auszublenden.
Ginge mit Jquery bissl einfacher aber mit klassischem JS siehts bei mir so aus:
Code: 
<!DOCTYPE html>
<html>
  <head>
  <title>test</title>
  <script language="JavaScript" type="text/javascript">
  function toggleElements(element,class_name) {
  var elements = document.getElementsByClassName(class_name);
  for (var i = 0;i < elements.length;i++){
    if(elements[i].id == element){
     elements[i].style.display = (elements[i].style.display == 'none') ? '' : 'none';
    }else{
     elements[i].style.display = 'none';
    }
   }
  }
  </script>
  </head>
  <body>
  <div id="buttons">
  <input type="button" name="btn_1" value="toggle 1" onclick="toggleElements('eins','div-toggle')"/>
  <input type="button" name="btn_2" value="toggle 2" onclick="toggleElements('zwei','div-toggle')"/>
  <input type="button" name="btn_3" value="toggle 3" onclick="toggleElements('drei','div-toggle')"/>
  <input type="button" name="btn_4" value="toggle 4" onclick="toggleElements('vier','div-toggle')"/>
  </div>
  <div id="eins" style="display:none;" class="div-toggle">
   <p>irgendwas1</p>
   <p>nochwas1</p>
  </div>
  <div id="zwei" style="display:none;" class="div-toggle">
   <p>irgendwas2</p>
   <p>nochwas2</p>
  </div>
  <div id="drei" style="display:none;" class="div-toggle">
   <p>irgendwas3</p>
   <p>nochwas3</p>
  </div>
  <div id="vier" style="display:none;" class="div-toggle">
   <p>irgendwas4</p>
   <p>nochwas4</p>
  </div>
  </body>
</html>
Habe die Funktion hier um einen Parameter erweitert anstatt den Namen der Klasse fest in die Funktion zu schreiben, damit man mit damit auch andere Elemente togglen kann.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben