This is my code, but I don't know how to debug it. Please help me and my code. I am trying to add a hide/show button for my contents list, but I don't know what is wrong with it. It is greatly appreciated. Ummm... I don't know what to say as I have to add more information. Just comment to ask any queries.
<!DOCTYPE html>
<html>
<head>
<title>How to be Asian</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
border: 0px;
margin: 2px;
}
h2
{
text-indent: 20px;
}
ul {
margin-top: 2%;
}
body {
margin: 2px;
border: 5px;
padding: 13px;
}
#Contents {
display: table;
padding: 7px;
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
font-size: 95%;
text-align: left;
float: right;
width: 15%;
}
#Quote {
text-align: center;
line-height: 2em;
padding-left: 25%;
padding-right: 25%;
padding-top: 20px;
padding-bottom: 20px;
display: block;
}
.Bonus {
display: inline;
font-size: 1.3em;
}
body{
padding: 1%;
margin: 1%
}
p h1{
display: inline;
float: left;
}
</style>
</head>
<body>
<script>
function myFunction() {
var x = document.getElementById("Contents");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div id="Contents">
<h1 id="Contents">Contents</h1><button onclick="myFunction()">[show]</button>
<ol>
<li><a href="#Chapter_1">Chapter 1: Early Childhood</a></li>
<li><a href="#Chapter_2">Chapter 2: Primary School Education</a></li>
<li><a href="#Chapter_3">Chapter 3: High School Education</a></li>
<li><a href="#Chapter_4">Chapter 4: College/University Education</a></li>
<li><a href="#Chapter_5">Chapter 5: Employment</a></li>
<li><a href="#Chapter_6">Chapter 6: Relationships</a></li>
<li><a href="#Chapter_7">Chapter 7: Family Gatherings</a></li>
<ol>
<li><a href="#Chapter_7.1">Chapter 7.1: Public Holidays</a></li>
<li><a href="#Chapter_7.2">Chapter 7.2: Death and mourning</a></li>
</ol>
<li><a href="#Chapter_8">Chapter 8: Retirement</a></li>
<li><a href="#Chapter_9">Chapter 9: Death</a></li>
</ol>
</div>
<div>
<h1 id="Chapter_1">Chapter 1: Early Childhood</h1>
<p>When Asian kids go through pre-schooling years and primary school, children are always put under pressure and always neglected so that they work harder and feel like they are worth something after some time and not actually useless.<br><span id="Quote">"We just never praise our children, always compare them to people who are better, so they grow up never feeling good enough and then have to constantly outdo everybody else to feel like they aren’t worthless." <br> Quoted from Stven He's father</span></p>
</div>
<div>
<h1 id="Chapter_2">Chapter 2: Primary School Education</h1>
<p>Asian kids are always compared to their peers by their parents. This is because Asian parents want the best of the child. This also means that children are used too much for the simplest of their demands. <br> <br> During this period of learning, PTSD is most used so that children are trained to cope "in the future". "In the future" meaning whenever you go back to your parents house when you are and adult. But this training will deal emotional damage, social anxiety and negliegence. This part of life is when most of the tactics are used so that the child can get used to them. Once they know how to leave the situation, create more problems for the child so that they get more experience. </p>
<p>This period of their life is when you can take advantage of them. For example, when you are shopping, tell your child that you are going to get something common in the household, like rice. Then, go to the aisle and watch them go to the cashier person and panic as you are assumed to get rice. Once they start getting constipated, go back with a 5kg bag of rice and start telling your child off for constipating in public. </p>
<div style="text-align: center;">
<h4 class="Bonus">BONUS! </h4><p class="Bonus">If you can humiliate your child in front of anyone, especially your child's friends, it will intergrate information for life. </p>
</div>
</div>
<div>
<h1 id="Chapter_3">Chapter 3: High School Education</h1>
<p>This period of life is when you get to choose his choices. </p>
</div>
<div>
<h1 id="Chapter_4">Chapter 4: College/University Education</h1>
</div>
<div>
<h1 id="Chapter_5">Chapter 5: Employment</h1>
</div>
<div>
<h1 id="Chapter_6">Chapter 6: Relationships</h1>
</div>
<div>
<h1 id="Chapter_7">Chapter 7: Family Gatherings</h1>
<h2 id="Chapter_7.1">Chapter 7.1: Public Holidays</h2>
<h2 id="Chapter_7.2">Chapter 7.2: Death and mourning</h2>
</div>
<div>
<h1 id="Chapter_8">Chapter 8: Retirement</h1>
</div>
<div>
<h1 id="Chapter_9">Chapter 9: Death</h1>
</div>
</body>
</html>