Randomize hidden content on load, reveal hidden content on click
Howdy,
I have put the following "Q&A" divs together:
<div class="Questions">
<div class="bat"><div class="firstheader"><button>Question1</button></div><div class="Question"><div id=Question > <div id="Answer"><div id="Answer1Output"></div><div id="ShowAnswer1" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div><div class="Space" style= "height: 80px"></div></div>
<div class="cat"><div class="header"><button>Question2</button></div><div class="Question"><div id=Question > <div id="Answer"><div id="Answer2Output"></div><div id="ShowAnswer2" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div><div class="Space" style= "height: 80px"></div></div>
<div class="cat"><div class="header"><button>Question3</button></div><div class="Question"><div id=Question > <div id="Answer"><div id="Answer3Output"></div><div id="ShowAnswer3" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div><div class="Space" style= "height: 80px"></div></div>
</div>
Here are the functions for these divs on load (also including "slide" functions for the "header" class to reveal the subsequent "question" class on-click. Note that the first "bat" div is shown, but the second and third "cat" divs are randomized and hidden.
$(function() {
$("div.Questions").randomize("div.cat");
$(".header").hide();
});
$(function() {
$(".Question").hide();
$(".header").click(function()
{
$(this).next(".Question").slideToggle(500);
});
$(".firstheader").click(function()
{
$(this).next(".Question").slideToggle(500);
});
});
(function($) {
$.fn.randomize = function(childElem) {
return this.each(function() {
var $this = $(this);
var elems = $this.children(childElem);
elems.sort(function() { return (Math.round(Math.random())-0.8); });
$this.remove(childElem);
for(var i=0; i < elems.length; i++)
$this.append(elems[i]);
});
}
})(jQuery);
And here is an on-click function for revealing the "Answer" output in the top "bat" div. It is also meant to reveal the "header" button for the hidden "cat" div directly below the "bat" div:
$("#ShowAnswer1").click(function(){
$("#Answer1Output").show();
$(this).closest(".cat").next(".header").show();
$("#ShowAnswer1").hide();
})
ATM, this function shows the "bat" div answer output successfully, but fails to show the "header" button for the "cat" div directly below it. Does anybody know why it fails to do this?
Thanks heaps in advance