Here is the code I'm currently working on: https://jsfiddle.net/Metalnoypi/d7ocf929/#&togetherjs=HD16R9BLLF
I am relatively new to JavaScript, HTML, and CSS. I am facing an issue where the main menu page should disappear when the start button is clicked, revealing the word "Test". I could use some recommendations on how to achieve this functionality along with a brief explanation of how it works.
<menu>
<div id="menu">
<body background="">
<divcenter>
<font color="blue"><font size="5"><center><h2> Realm of Rilthalk </h2></center></font></font>
<font color="magenta"><font size="5"><center><h3>The Origin Story</h3></center></font></font>
</divcenter>
<divbottomleft> <input type="button" id="start" class="hide" value = "Start Game"/> </divbottomleft>
<divbottomright><input type="button" id="quit" value = "Quit"/>
</divbottomright>
</body>
</div>
</menu>
<game>
<div id="game" class="toshow" style="display:none" >
<divcenter><font color="jade"><H1><center> Test </center></H1></font>
</divcenter>
</div>
</game>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$(this).parents("menu").hide();
$("game").parents("game").toggle();
});
});
</script>
This is my CSS Code:
divcenter {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
divbottomleft {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: -200px;
}
divbottomright{
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: 130px;
}