jQuery show / hide / toggle funktioniert, bleibt aber nicht so, wie es sollte - es kehrt zum ursprünglichen Zustand zurück
Ich versuche, Antworten auf häufig gestellte Fragen mit jQuery ein- / auszublenden. Die Idee ist, dass alle Fragen aufgelistet werden und nur dann, wenn ein Benutzer die Antwort sehen möchte, er auf die Frage klickt (die wie ein Link aussieht) und die Antwort dann sichtbar wird.
Es funktioniert nur, dass die Antwort auf den ursprünglichen Zustand zurückgesetzt wird, sobald darauf geklickt wird. Wenn ich in diesem Fall auf die Frage klicke, um die Antwort anzuzeigen, wird sie angezeigt und verschwindet dann im nächsten Moment, anstatt sichtbar zu bleiben, bis erneut darauf geklickt wird, um sie auszublenden.
Ich habe den folgenden Code eingefügt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js" ></script>
<script>
$(document).ready(function() {
$('div.showhide,#answer').hide();
$('#question').click(function(){
$('div.showhide,#answer').toggle();
});
});
</script>
</head>
<body>
<p><a href="" id="question" name="question">Question</a></p><div id="answer" name="answer">Answer</div></p>
</body>
</html>