Menu
The following code allows the user to click on the question of a flashcard and it displays the answer.
The problem is it displays all the answers for all the flashcards.
How can I pass the id of each flashcard so that the user can click on the title and toggle the question open and closed?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
$("div > div.answer").hide();
$("div > div.question").click(function() {
$("div > div.answer").fadeIn("slow");
});
});
</script>
<style>
div.flashcard {
margin: 0 10px 10px 0;
}
div.flashcard div.question {
background-color:#ddd;
width: 400px;
padding: 5px;
}
div.flashcard div.answer {
background-color:#eee;
width: 400px;
padding: 5px;
}
</style>
</head>
<body>
<div id="1" class="flashcard">
<div class="question">Who was Wagner?</div>
<div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div>
</div>
<div id="2" class="flashcard">
<div class="question">Who was Thalberg?</div>
<div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div>
</div>
</body>
</html>
330
You don't need to pass in the ID. Just traverse from the div clicked to the answer you want. this refers to the source of the event, which will in this case be a div with class "question".
$("div.question").click(function() {
$(this).next().fadeIn("slow");
});
Also, assuming your markup is accurate this can be simplified:
$("div > div.answer").hide();
to simply
$("div.answer").hide();
but I would actually do it with CSS:
div.answer { display: none; }
so no Javascript needs to be executed when the page loads. In my experience when using an async load of jQuery with the Google AJAX Libraries API like you are, the page will render and then your flashcard answers will visibly disappear. This tends to be undesirable. Just use CSS to hide them.
Also, jQuery is as of a day or two ago up to version 1.4.1.
128
Since the two divs are siblings, you can use the next method to get the next div.answer element:
$("div > div.question").click(function() {
$(this).next("div.answer").fadeIn("slow");
});
Check an example here.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
