How can I get jquery to toggle-fade a flashcard div open and closed on click?
Posted
by Edward Tanguay
on Stack Overflow
See other posts from Stack Overflow
or by Edward Tanguay
Published on 2010-02-01T04:23:35Z
Indexed on
2010/04/11
14:03 UTC
Read the original article
Hit count: 257
What do I have to change to the code below in order for the user to click on a flashcard header to open and close the flashcard answer?
- I couldn't get toggle() to work with fadein/fadeout
- the version below doesn't respond to the click
code:
<!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.1");
google.setOnLoadCallback(function() {
$("div > div.question").click(function() {
if($(this).next().is(":hidden") {
$(this).next().fadeIn("slow");
} else {
$(this).next().fadeOut("slow");
}
});
});
</script>
<style>
div.flashcard {
margin: 0 10px 10px 0;
}
div.flashcard div.question {
background-color:#ddd;
width: 400px;
padding: 5px;
cursor: hand;
cursor: pointer;
}
div.flashcard div.answer {
background-color:#eee;
width: 400px;
padding: 5px;
display: none;
}
</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>
© Stack Overflow or respective owner
