Раздел на моем сайте не отвечает (расширяется) при нажатии [закрыто] ⇐ Javascript

[Anonymous]

Я работаю над проектом веб -сайта, используя HTML, CSS, JS, Bootstrap, PHP и Angular v1.8.2. Я маршрутирую с помощью угловой. Задача, с которой я сталкиваюсь, находится в разделе FAQ. Я поднял свой HTML, CSS и JS в порядке, но когда часто задаваемые вопросы нажимают, JS не отвечает, что они заставляют их расширить, чтобы показать детали ниже каждого вопроса. Что и где может быть проблема. class = "Snippet-Code-JS Lang-JS PrettyPrint-Override">

Код: Выделить всё

//Frequently Asked Questions Toggle start
document.querySelectorAll('.faq-item h3, .faq-item .faq-toggle').forEach((faqItem) => {
faqItem.addEventListener('click', () => {
faqItem.parentNode.classList.toggle('faq-active');
});
});
//Frequently Asked Questions Toggle end< /code>
/* ================ FAQS Section Start ================= */
.faq {
padding-top: 20px;
padding-bottom: 20px;
}

.faq .content h3 {
font-weight: 400;
font-size: 34px;
}

.faq .content p {
font-size: 15px;
color: #000000;
}

.faq .faq-container .faq-item {
position: relative;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.896);
overflow: hidden;
border-radius: 10px;
}

.faq .faq-container .faq-item:last-child {
margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
font-weight: 600;
font-size: 18px;
line-height: 24px;
margin: 0 30px 0 0;
transition: 0.3s;
cursor: pointer;
display: flex;
align-items: flex-start;
}

.faq .faq-container .faq-item h3 .num {
color: #ff0000;
padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
color: #ff0000;
}

.faq .faq-container .faq-item .faq-content {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
margin-bottom: 0;
overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
position: absolute;
top: 20px;
right: 20px;
font-size: 16px;
line-height: 0;
transition: 0.3s;
cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
color: #ff0000;
}

.faq .faq-container .faq-active h3 {
color: #ff0000;
}

.faq .faq-container .faq-active .faq-content {
grid-template-rows: 1fr;
visibility: visible;
opacity: 1;
padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
transform: rotate(90deg);
color: var(--accent-color);
}
/* ================ FAQS Section end ================= */< /code>







Frequently Asked [b]Questions(FAQs)[/b]

Here are some frequently asked questions and their answers, providing valuable insights and guidance about us, our services and expertise.





1. What is EMRA Beauty Consult and what does it specialize in? 

EMRA Beauty Consult is a leading firm in the beauty industry, specializing in strategic consultancy, branding, staff training, salon management, and internship programs tailored for beauty professionals and businesses.

[i][/i]


2.  How long has EMRA Beauty Consult been in operation? 

EMRA Beauty Consult has been serving clients in the beauty industry for over 5 years, providing expert guidance and support to help businesses thrive and individuals succeed in their careers.

[i][/i]


3. What sets EMRA Beauty Consult apart from other firms in the industry? 

At EMRA Beauty Consult, we pride ourselves on our comprehensive approach to beauty consulting, combining industry expertise with a deep understanding of market trends and client needs to deliver unparalleled results for our clients.

[i][/i]


4. Does EMRA Beauty Consult have a specific mission or vision? 

Yes, our mission at EMRA Beauty Consult is to empower beauty businesses and professionals to achieve their full potential through strategic guidance, innovative solutions, and personalized support. We envision a future where every beauty business thrives and every beauty professional succeeds.

[i][/i]


5. Where is EMRA Beauty Consult located, and how can I get in touch? 

Our headquarters are located at [Address], [City, State, Zip Code]. To get in touch with us, you can reach out via phone at [Phone Number] or email us at [Email Address]. We look forward to hearing from you!

[i][/i]

Подробнее здесь: https://stackoverflow.com/questions/797 ... en-clicked