http://www.php-resource.de/scripte/browsesub/PHP/FAQ/1/

Hallo Oliver.

Ich würde gerne eine FAQ-Seite erstellen und suche ggf eine Vorlage oder einen Tipp, wie ich dies am besten umsetzen kann. Mit HTML und Javascript, bin aber auch für andere Ideen offen.

Bezüglich der Struktur würde sich meiner Meinung nach eine Definitionsliste anbieten.

Fürs JavaScript solltest du zuerst einmal <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=beim Laden> zwei Dinge tun:

• Ausblenden aller dd-Elemente in dieser Definitionsliste,
  • Jedes dt-Element dynamisch mit einem onclick-Handler versehen.

Das Ausblenden kannst du entweder direkt per display-Eigenschaft des http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objektes oder per Zuweisung einer Klasse (elementobjekt.className) erledigen lassen.

Dieser onclick-Handler muss nun nichts weiter tun, als das dem dt-Element nebenstehende dd-Element einzublenden. Da hier keine Verschachtelung erlaubt ist, nützt dir getElementsByTagName hier nicht viel. Aus diesem Grund solltest du zwischen dt- und dd-Element keine Whitespaces notieren und mit http://de.selfhtml.org/javascript/objekte/node.htm#next_sibling@title=nextSibling arbeiten. Solltest du dich jedoch für eine (un)geordnete Liste entscheiden, ist getElementsByTagName jedoch geeignet.

Beim Auslösen des onclick-Events solltest du zugleich auch ein internes Flag setzen, welches bestimmt, ob das jeweilige dd-Element aus- oder eingeblendet werden soll. Der Einfachheit halber könntest du dieses Flag direkt an das jeweilige dt-Elementobjekt koppeln:

var dt = document.getElementsByTagName('dt')[i];  
    dt.sichtbar = true;  
  
if (dt.sichtbar) {  
  // dd-Element ausblenden  
} else {  
  // dd-Element einblenden  
}

Auch soll es möglich sein, wenn ich bspw von einer andere Seite direkt auf eine Antwort verlinke, dass diese dann bereits geöffnet angezeigt wird.

Dazu könntest du jedem dt-Element eine ID verpassen, welches damit als Anker fungiert. Mittels location.http://de.selfhtml.org/javascript/objekte/location.htm#hash@title=hash könntest du so das angesprungene dt-Element bestimmen und sein dd-Element einblenden.

Einen schönen Donnerstag noch.

Gruß, Mathias