Element über Node-Eigenschaften ansteuern, um DIV-Element ein- und auszublenden

[friendlycode]

Hallo zusammen

Ich möchte auf einer Webseite ein DIV-Element ein- und ausblenden können. Das habe ich mit JavaScript auch hinbekommen. Da ich mich aber noch nicht sehr lange mit JavaScript beschäftige, bin ich mir nicht sicher, ob ich einen vernünftigen Code geschrieben habe und ob man es nicht auch hätte einfacher lösen können.

Insbesondere dort wo ich das entsprechende DIV über die Node-Eigenschaften ansteuere. Muss man sich dabei durch die ganze DOM-Struktur "navigieren"?

tag.parentNode.parentNode.nextSibling.nextSibling.style.display = "block";

Hier die entsprecheden Ausschnitte aus dem JS-Code und der HTML-Ausschnitt:

	function zeigeKommentar(tag){
		if(tag.innerHTML == "zeige Kommentar"){
			tag.innerHTML = "schliesse Kommentar";
			tag.parentNode.parentNode.nextSibling.nextSibling.style.display = "block";
		} else {
			tag.innerHTML = "zeige Kommentar";
			tag.parentNode.parentNode.nextSibling.nextSibling.style.display = "none";
		}
	}

	<div id="wrapper">
		<div id="news">...</div>
		<div id="comments">
			<h2>Kommentare:</h2>
			<ul>
				<li>
					<div class="commenthead"><p>TITEL DER IMMER ANGEZEIGT WIRD<a a href="#" onclick="zeigeKommentar(this);">zeige Kommentar</a></p></div>
					<div class="commenttext"><p>DIESER INHALT SOLL EIN- UND AUSGEBLENDET WERDEN</p></div>
				</li>
				<li>
					<div class="commenthead"><p>TITEL DER IMMER ANGEZEIGT WIRD<a a href="#" onclick="zeigeKommentar(this);">zeige Kommentar</a></p></div>
					<div class="commenttext"><p>DIESER INHALT SOLL EIN- UND AUSGEBLENDET WERDEN</p></div>
				</li>
			</ul>
		</div>
	</div>

Das dazugehörige CSS setzt style.display beim DIV, welches nicht sichtbar sein soll, natürlich standardmässig auf "none". Das habe ich hier jetzt mal weggelassen.

Vielen Dank für euer Feedback was ihr davon haltet und ob man den Teil mit den Node-Eigenschaften auch einfacher und eleganter lösen könnte.

 

[dertypdernixkan]

jQuer<

$(".commenthead a").click(function(){

  $(this).next().slideToggle("slow");

});

 

[friendlycode]

Danke für die Antwort!

Das heisst dann aber wohl auch, dass es ohne jQuerry nicht einfacher geht?