Referencing a title to call up an ID
I'm trying to learn some jquery so I took a tutorial off NETTUTS and modified it to be a Jeopardy game. But.. I'm trying to set it up so that when the Question is clicked it will replace the question with the text of the answer. I tried merely replicating the format of the lines where my numbered boxes (class="tabs") is clicked and calls up "content" but so far to no avail. Not sure why because I don't know enough about jQuery.
The working one with the questions displaying properly is
here. The code for that is:
-
// When the document loads do everything inside here ...
$(document).ready(function(){
$(".content").hide();
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
/*
// switch this tab on
$(this).addClass("active");
*/
// switch this tab on
$(this).addClass("visited");
// slide all content up
$(".content").hide();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show ).fadeIn("slow");
});
To get the answers to display when I click on the content class, I added a class called answer and then this:
-
$("a.content").click(function () {
// slide all content up
$(".answer").hide();
// slide this content up
var answer_show = $(this).attr("title");
$("#"+answer_show ).fadeIn("slow");
}
It mirrors the working code I already have to bring up content when a tab is clicked. I also had to modified my content making it a link with a title..
-
<div id="content_1" class="content"><ul><li><a href="#" title="answer_1" class="content">Question 1</a></li></ul></div>
And referencing the answers..
-
<div id="answer_1" class="answer"><ul><li>Answer 5</li></ul></div>
But
it's all jacked up and I'm not sure why.
I don't know what's up with this butI'm sure it's probably something straightforward that I'm just missing in trying to implement jQuery.