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

Beitrag lesen

SELF-Forum

child-Elemente im parent-Element verändern

Cornelius
– Informationen zu den Bewertungsregeln

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?

Beitrag melden
–
Informationen zu den Bewertungsregeln