Das folgende exemplarische Beispiel zeigt, wie man mit jQuery ein pflegeleichtes FAQ erstellen kann. JavaScript-Teil:

<script language="javascript" type="text/javascript">
 
	$(document).ready( function() {	// erst, wenn der Quellcode fertig geladen wurde
 
		$(".FAQ").each( function( index ) { // alle Elemente (Fragen) mit der Klasse "FAQ" durchlaufen
 
			$( this ).click( function() { // wenn die Frage angeklickt wurde
 
				if( $( "#FAQ_" + index ).is( ":hidden" ) )	// wenn die Antwort ausgeblendet ist
					$( "#FAQ_" + index  ).slideDown(); 	// Antwort einblenden
				else 						// wenn die Antwort eingeblendet ist
					$( "#FAQ_" + index ).slideUp();		// Antwort ausblenden
			});
		});
	});
</script>

HTML-Teil:

<fieldset>
	<legend><a class="FAQ">Frage Nr. 1</a></legend>
	<div id="FAQ_0" style="display:none;"><p>Antwort Nr. 1</p></div>
</fieldset>
<fieldset>
	<legend><a class="FAQ">Frage Nr. 2</a></legend>
	<div id="FAQ_1" style="display:none;"><p>Antwort Nr. 2</p></div>
</fieldset>
<fieldset>
	<legend><a class="FAQ">Frage Nr. 3</a></legend>
	<div id="FAQ_2" style="display:none;"><p>Antwort Nr. 3</p></div>
</fieldset>

Erläuterungen:

• Die Fragen müssen zur Identifizierung mit der Klasse „FAQ“ gekennzeichnet werden.
• Die Antworten müssen zur Identifizierung mit der ID „FAQ_X“ deklariert werden, wobei „X“ ein nummerischer Ausdruck ist, der bei „0“ beginnt.