I want to feature an accordion in my web design and found the structure/code content on W3Schools. I copied it exactly as it was written but the content in the accordion won't load when the JavaScript is featured in the head. I know that the function won't execute because of where the JavaScript is written but how would I make the adjustment so that the JavaScript can remain in the head and the function is executed within the body?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Sunscreen for Your Skin Type </title>
<link rel="stylesheet" type="text/css" href="suninfo.css">
<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</head>
<body>
<div class="container1">
<h1>Finding the Perfect Match</h1>
<h3>Learn How to Select the Right Sunscreen Based on Your Skin Type</h3>
</div>
<div class="container2">
<img src="heart.jpeg" height="400px" width="500px"></src>
</div>
<div class="container3">
<h1> Oily? Dry? Sensitive?</h1>
<h3>Click on the Tabs Below to Learn How to Pick the Right Sunscreen Based on Your Skin Type</h3>
</div>
<div class="container4">
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
</html>
type here
The function can be successfully executed when it's below, but I want to place it in the head. What adjustments need to be made to the JavaScript so that it will execute in the head of the document?
<button class="accordion">Skin Cancer Statistics</button>
<div class="panel">
<p>The Skin Cancer Foundation states that melanoma is the second MOST COMMON type of cancer diagnosed in 15-19 year olds and the most common form of cancer affecting young adults between the ages of 25-29.</p>
<p> Sustaining just 5 sunburns as a teenager can make an adult 80% more likely to develop melanoma during their lifetime.</p>
</div>
<button class="accordion">Signs of Skin Cancer</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Sunburn Care</button>
<div class="panel">
<p>Go to your local pharmacy or convenient store to purchase alloe. If you don't have any, you can create a paste made from water and baking soda and apply it to the burn area to relieve some of the pain and heat.</p>
<p>Make sure to be drinking water and staying hydrated. The body tries to heal the burn by drawing moisture from other areas of the </p>
</div>
<!--Coding steps for accordion were found on W33schools but if I place the JavaScript in the head, the code won't work properly. I will try to adjust this-->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
