I have been working on my website and decided to incorporate an FAQ page. I used a template for the FAQ section and tried to implement Javascript in my NextJs project, but unfortunately, it's not functioning as expected.
var faq = document.getElementsByClassName("faqpage");
var i;
for (i = 0; i < faq.length; i++) {
faq[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var body = this.nextElementSibling;
if (body.style.display === "block") {
body.style.display = "none";
} else {
body.style.display = "block";
}
});
}
var cpt = document.getElementsByClassName("faqbody");
var i;
for (i = 0; i < faq.length; i++) {
cpt[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var body = this.nextElementSibling;
if (body.style.display === "block") {
body.style.display = "none";
} else {
body.style.display = "block";
}
});
}.Faq {
background-color: rgba(46,40,35,255);
padding-top: 50px;
padding-bottom: 150px;
}
.Faq h2 {
color: white;
text-align: center;
font-size: 4vh;
margin-bottom: 20px;
}
.faqcontainer{
display: flex;
justify-content: center;
flex-direction: column;
}
.hrline{
width: 62%;
margin: auto;
margin-top: 20px;
}
.faqpage {
cursor: pointer;
padding: 30px 20px;
width: 60%;
border: none;
font-size: 25px;
font-weight: 600;
outline: none;
transition: 0.4s;
margin: auto;
color: #EC2628;
}
.faqbody{
margin: auto;
/* text-align: center; */
width: 50%;
line-height: 30px;
font-size: 20px;
padding: 0 18px;
display: none;
overflow: hidden;
padding-bottom: 20px;
}
.faqpage:after {
content: '\002B';
/* Unicode character for "plus" sign (+) */
font-size: 35px;
font-weight: 100;
color: white;
float: right;
transition-duration: 0.5s;
}
.active:after {
transform: rotate(45deg);
/* Unicode character for "minus" sign (-) */
font-weight: 100;
}<div className={styles.Faq}>
<h2>FAQ</h2>
<div className={styles.faqone}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqtwo}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqthree}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqfour}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<Script src="../components/FAQLOC.js"></Script>
</div>After checking, I suspected that the issue might be related to the classes and the handling of classes using Javascript within Nextjs. However, I am unsure about how to resolve this problem.
The code snippet above provides insights into my CODE! Is there anyone who could assist me in resolving this?