JavaScript (div ein- und ausblenden)

[NinaJS]

Hallo!

Ich bin Einsteiger bei JavaScript und habe folgendes Problem:

Ich möchte, dass zwei Text-Teile in einem HTML-Dokument zunächst verborgen sind, wenn die Seite angezeigt wird.
Über zwei Links sollen die Texte dann jeweils sichtbar gemacht werden können. Die Links sollen in JavaScript erstellt werden. Der Link kann z.B. "Mehr Infos" heißen. Wenn dann der Text sichtbar ist, soll dieser auch wieder verborgen werden können, indem man auf den Link klickt, der dann seinen Namen geändert hat zu "Verberge Infos".

DETAILS:
Im HTML-Dokument sollen die Bereiche <p class="show"> ein- bzw. ausgeblendet werden.

Bisher ist es mir nur gelungen, die Textbereiche auszublenden und einen Link einzufügen (dafür habe ich im HTML-Dokument ein leeres <div id="text1"> eingefügt.

Meine Hauptfrage ist nun, wie ich den geschaffenen Link mit dem Text verbinde, der erscheinen soll.

Für eure Hilfe wäre ich sehr dankbar!!

Hier mein JavaScript kod:

window.onload = function() {
var p_show = document.getElementsByClassName("show");
for (var counter=0; counter<p_show.length; counter++){
p_show[counter].setAttribute("style", "display:none"); }
var link = document.createElement("a");
var moretext = document.getElementById("text1");
moretext.appendChild(link);
var link_text = document.createTextNode("VISA MER INFORMATION");
link.appendChild(link_text);
link.setAttribute("href");

Gruss
Nina

 

[tombe]

Also wenn der Link bereits beim Laden der Seite vorhanden sein soll, warum ihn dann so kompliziert erst mit Javascript erzeugen und nicht direkt in die Seite eingeben?

<script language="javascript" type="text/javascript">
function info() {
	if (document.getElementById("link").innerText == "Mehr anzeigen") {
		document.getElementById("link").innerText = "Weniger anzeigen";
		document.getElementById("infotext").style.display = "block";
	} else {
		document.getElementById("link").innerText = "Mehr anzeigen";
		document.getElementById("infotext").style.display = "none";
	}
}
</script>

<a href="#" onclick="info(); return false;" id="link">Mehr anzeigen</a>
<div id="infotext" style="width: 200px; height: auto; display: none;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

P.S. Willkommen im Forum!

 

[NinaJS]

Hi!

Danke!

Klar, dass das eigentlich einfacher geht, einen Link direkt in HTML einzufügen. Aber die Aufgabenstellung war eben so, dass der mit JavaScript generiert werden soll...

Ich habe den Code jetzt so angepasst, dass sich der Name des Links ändert, wenn man darauf geklickt hat. Aber leider bekomme ich es noch nicht hin, dass der entsprechende Text eingeblendet wird. Wie verknüpfe ich den Text mit dem Link? Ich habe ja im HTML-code nur einen leeren <div class="text1"> tag und im JavaScript-Code ein generiertes <a> Element.

Gruss
Nina