Wissensarchiv für Entwickler

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.

====== FAQ mit jQuery erstellen ======

Das folgende exemplarische Beispiel zeigt, wie man mit jQuery ein pflegeleichtes FAQ erstellen kann.
**
JavaScript-Teil:**
<code javascript>
<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>
</code>

**HTML-Teil:**
<code html>
<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>
</code>
**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.

Wissensarchiv für Entwickler

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge