I am looking to create a webpage filled with riddles. After each riddle, there will be an answer button that, when clicked, reveals the answer. Clicking the button again should hide the answer. I attempted to implement this functionality using Javascript, but as a beginner, I seem to have made some mistakes. You can find my code HERE
Here is a snippet of my code:
<input type="button" value="Answer" onclick="return change(this);" />
<p id="click">This is the riddle answer.</p>
The CSS I used is as follows:
#click{
display:none;}
And here is the JavaScript portion:
$(document).ready(function(){
$(window).change(function(){
if (el.value == "Answer" ){
$("p#click").removeClass("click");
el.value = "Hide";
} else if ( el.value = "Hide";) {
$("p#click").addClass("click");
}
});
});
I aspire to achieve something similar to this Demo, where there is just one button that can toggle between displaying and hiding the answer.