Cornelius: child-Elemente im parent-Element verändern

Hallo, Ich bin gerade dabei eine Startseite für eine Art Blog zu erstellen, in der bis auf den ersten und den letzten Absatz alle ausgeblendet sind. Klappt auch bislang ganz gut: HTML:

<html>
<article>
<p>Zeile 1</p>
<p>Zeile 2</p>
<p>Zeile 3</p>
<p>Zeile 4</p>
<p>Zeile 5</p>
</article>
<article>
<p>Zeile 1</p>
<p>Zeile 2</p>
<p>Zeile 3</p>
<p>Zeile 4</p>
<p>Zeile 5</p>
</article>
</html>

CSS:

<style>
article p:nth-child(n+2) { display: none; }
article p:last-child { display: block; }
</style>

Nun möchte ich das durch anklicken des letzten Absatzes die anderen Absätze wieder eingeblendet werden. Ich dachte erst an so ein Javascript:

<script>
{
  var nodes = document.getElementById("parent").childNodes;
  for(var i=0; i<nodes.length; i++) {
	if (nodes[i].nodeName.toLowerCase() == "p") {
	nodes[i+2].style.display = "block";
	}
  }
}
</script>

Nur müsste ich dann dem article-Element eine ID zuweisen und da es ja nicht nur ein einziges article-Element ist und ich nicht für alle ein eigenes Script schreiben wollte, suche ich nach einer allgemeinen Möglichkeit alle child-Elemente(<p>) im parent-Element(<article>) anzusprechen.

Könnt ihr mir da weiterhelfen?

  1. Hallo Cornelius

    Funktionen werden durch Übergabeparameter sehr flexibel:

    function blende_ein(id) { ... }
    

    Es gibt auch parentNode

    Ich würde auf childNodes verzichten und lieber getElementsByTagName oder querrySelectorAll nehmen.

    Gruß Jürgen