✔ Div Container mit Text wechsel

[EuroCent]

Hallo folgende Frage

Wie schaffe ich das wenn ich auf zeigen klicke der bestimmte DIV aufklappt und der Text zeigen sich in Verstecken ändern?

Hat da wern Link zu einem Script?

Hab das so vor:

<style>
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #CCCCCC;
}
#mainpage {
	height: 80%;
	width: auto;
	text-align: center;
}

#header {
	width: 80%;
	padding: 2px;
	border: 1px solid #000000;
	text-align: left;
	bottom: 5px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
}
#title {
	width: 80%;
	border: 1px solid #000000;
	text-align: left;
	bottom: 5px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	padding: 2px;
}
#content_q {
	width: 80%;
	padding: 2px;
	border: 1px solid #000000;
	text-align: left;
	bottom: 5px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
}
#quests {
	float: left;
	margin: 0px;
	width: 50%;

}
#showhide {
	margin: 0px;
	text-align: right;

}
#questdesc {
	width: 80%;
	padding: 2px;
	border: 1px solid #000000;
	text-align: left;
	bottom: 5px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	display: none;
}
</style>

<div id="mainpage">
  <div id="header">Header</div>
    <div id="title">Titel</div>
    <div id="content_q">
      <div id="quests">Questbeschreibung</div>
      <div id="showhide"><a href="#show">Zeigen</a> <a href="#hide" >Verstecken</a></div>
    </div>
    <div id="questdesc">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</div>
</div>

In dem Bereich <div id="showhide"><a href="#show">Zeigen</a> <a href="#hide" >Verstecken</a></div> soll natürlich nur ein link dargestellt werden...

Das heisst wenn ich auf Zeigen klicke und der Div-Block aufgeht bzw. auf ist soll aus Zeigen Verstecken angezeigt werden so das ich dort nur noch eine verlinkungen stehen habe

Allerdings weiss ich nicht wie ich das genau bewerkstelligen kann.

MfG

Lenox

 

[tamtam]

Hi!
Versuchs mal in etwa so:

<script type="text/javascript">
function showHide() {
	var foo = document.getElementById('questdesc');
	var bar = document.getElementById('showhide');
	if (foo.style.display == "none") {
		bar.innerHTML = "<a href=\"javascript:void(0);\" onclick=\"showHide();\">Verstecken</a>";
		foo.style.display = "block";
	} else {
		bar.innerHTML = "<a href=\"javascript:void(0);\" onclick=\"showHide();\">Zeigen</a>";
		foo.style.display = "none";
	}
}	
</script>
<div id="mainpage">
  <div id="header">Header</div>
    <div id="title">Titel</div>
    <div id="content_q">
      <div id="quests">Questbeschreibung</div>
      <div id="showhide">
      	<a href="javascript:void(0);" onclick="showHide()">Zeigen</a></div>
    </div>
    <div id="questdesc" style="display:none";>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</div>
</div>

 

[EuroCent]

Super danke ^^

Sehr hilfreich

 

[tamtam]

Wenn das keine Ironie war: Bitte, gern geschehen.
An deiner stelle würde ich das von mir in 2 Minuten hingerotzte aber nicht einfach übernehmen. Es soll dir nur zeigen wie man an so eine Anforderung herangehen _kann_. Es gibt für solche Fälle aber durchaus elegantere Methoden (erst recht wenn man Frameworks wie Prototype, jQuery oder Scriptaculous einsetzt).

 

[EuroCent]

Ich arbeite eigentlich ungern mit JavaScript aber irgendwie kommt man nie Dran vorbei ^^

Dennoch danke für die Hilfe werd es mir zu herzen nehmen und draus studieren