Frage und Antwort

Zielsetzung

In einer FAQ-Liste sollen zunächst nur die Fragen angezeigt werden. Die Antwort soll beim Klick auf die Frage erscheinen.

Realisierung

Die Fragen und Antworten werden mit IDs versehen:

<h2 id="q1">Frage eins?</h2>
<p id="a1">Antwort auf Frage eins.</p>

<h2 id="q2">Frage zwei?</h2>
<div id="a2">
<p>Antwort auf Frage zwei.</p>
<p>Diese Antwort fällt etwas länger aus.</p>
</div>

Das folgende Skript wird am Ende der Seite eingebettet oder beim Laden der Seite gestartet. Es sucht zunächst die Antworten und blendet diese aus. Dann werden die Fragen neu formatiert und mit einem Eventhandler versehen.

//Q'n'A (c)'09 F.Perder
var e=document.getElementsByTagName("h2");
for (i=0;i<e.length;i++){if (e[i].id.substr(0,1)=="q"){
var c=document.createAttribute("onClick");
var a="a"+e[i].id.substr(1,3);
var sbg=e[i].style.background;
//Answer:
document.getElementById(a).style.display="none";
c.value="document.getElementById('"+a+"').style.display='block';";
//Question:
e[i].style.color="#00f";
e[i].style.background="url(/arrow_down.gif) no-repeat right";
c.value+="this.style.color='#000';";
c.value+="this.style.background='"+sbg+"'";
e[i].setAttributeNode(c);
}}

Beispiel

Die FAQs von Q-note verwenden dieses Skript.