Der folgende Absatz zeigt ein <pre><code>-Element, dass beim Laden der Seite zugeklappt erscheint.
- Code verbergen | + Code anzeigen
<p class="ButtonSnappedCode"> - Code verbergen | + Code anzeigen </p>
<pre style="width: 75em; margin-top: 0"><code class="html">...</code></pre>Das Gleiche in aufgeklappter Variante ...
- Code verbergen | + Code anzeigen
<p class="ButtonExpandedCode"> - Code verbergen | + Code anzeigen </p>
<pre style="width: 75em; margin-top: 0"><code class="html">...</code></pre>Im folgenden zwei Absätze mit "normaler" Formatierung. Die mit Funktion hinterlegten Elemente sind vom Typ <h2>. Die Überschriften bei auf- und zugklappten Element sind identisch. Das title-Attribut ermöglicht die Anzeige eines Tooltips, wenn der Mauszeiger über dem Element verweilt.
Der Bereich, der auf- und zugeklappt wird, ist strukturiert und in einen <div>-Container gepackt. Er wird als Ganzes auf- und zugeklappt. Der folgende Text ist initial zugeklappt.
Damit Ihr indess erkennt, woher dieser ganze Irrthum gekommen ist, und weshalb man die Lust anklagt und den Schmerz lobet, so will ich Euch Alles eröffnen und auseinander setzen, was jener Begründer der Wahrheit und gleichsam Baumeister des glücklichen Lebens selbst darüber gesagt hat. Niemand, sagt er, verschmähe, oder hasse, oder fliehe die Lust als solche, sondern weil grosse Schmerzen ihr folgen, wenn man nicht mit Vernunft ihr nachzugehen verstehe./p>
Ebenso werde der Schmerz als solcher von Niemand geliebt, gesucht und verlangt, sondern weil mitunter solche Zeiten eintreten, dass man mittelst Arbeiten und Schmerzen eine grosse Lust sich zu verschaften suchen müsse. Um hier gleich bei dem Einfachsten stehen zu bleiben, so würde Niemand von uns anstrengende körperliche Uebungen vornehmen, wenn er nicht einen Vortheil davon erwartete.
Der HTML-Code hierzu:
<h2 class="HeadlineSnappedText" title="Text auf- und zuklappen">Details zum Plan</h2>
<div>...</div>Der folgende Absatz ist initial aufgeklappt.
parentNode, childNodes, firstChild sind altgediente Methoden und liefern auch Text Nodes, Kommentare, Leerzeichen und Zeilenumbrüche zurück.
Die neuen Methoden firstElementChild, lastElementChild, nextElementSibling und previousElementSibling sind präziser als firstChild, nextSibling usw., denn sie geben nur Elemente mit nodeType 1 zurück. Das erspart viele Abfragen und macht den Scriptcode lesbarer.
Der HTML-Code hierzu:
<h2 class="HeadlineSnappedText" title="Text auf- und zuklappen">Details zum Plan</h2>
<div>...</div>Und zum Schluss einfach ein Farbwechsel:
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?