I've been making an Accordion-style FAQ for a website I'm building. I imported the JavaScript code and linked it to the main HTML file to make the motion of popping out the FAQ below when it is clicked. Unfortunately, it is not working for some reason, no matter if I place script directly in the HTML file or link the script file externally. Could someone let me know where it is going wrong? Thank you very much!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="icon" href="https://drive.google.com/uc?id=15DKhs1-y_c6C5TXfbQ1es1cJYwItjKkQ" sizes="32x32" type="image/png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">.
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="app.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<div id="faq">
<div class="faq-title">FAQ</div>
<button class="accordion">Question 1</button>
<div class="panel">
<p>Answer 1</p>
</div>
<button class="accordion">Question 2</button>
<div class="panel">
<p>Answer 2</p>
</div>
<button class="accordion">Question 3</button>
<div class="panel">
<p>Answer 3</p>
</div>
</body>
</html>
And below is the CSS I've used.
/* FAQ */
.faq-title {
text-align: left;
font-family: 'Poppins', sans-serif;
font-size: 40px;
margin-left: 6vw;
margin-top: 10vh;
margin-bottom: 7vh;
font-weight: bold;
color: black;
}
.accordion {
background-color: #ffe3c9;
font-family: 'Poppins', sans-serif;
color: #444;
font-size: 20px;
cursor: pointer;
padding: 25px;
margin-left: 5vw;
margin-right: 5vw;
margin-bottom: 1vh;
width: 90%;
text-align: left;
border: none;
border-radius: 10px;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #FF8718;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion:after {
padding-top: 0.5vh;
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #FF8718;
float: right;
margin-left: 5px;
}
.active:after {
padding-top: 1vh;
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
Now comes the JS in the script.js file:
/* FAQ ACCORDION STYLE */
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";
}
});
}
