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

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

  1. child-Elemente im parent-Element verändern

    JürgenB
    +2 Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln