FAQ Accordion Card-Updated

hello Aman I want to help you with some tips that may help you

You have a problem containing the card (there are a lot of solutions and I hope you will try more because it depends on your own experience in responsive and I can direct you if you want)

I have two notes with javascript

• we can't cancel .faq-ans-text after clicking again
• the code can be shortened to: array.forEach(element => { forEach });

you can ask me if you need any clarification

You still have a problem with responsive

I saw your edit and it doesn't work well

I like the idea of ​​the ID But there is a better solution foreach can contain index and array to

forEach((element, index, array) => { ... } )

In order to save your time, I will show you the modification that I made to your code

arrow_Btn.forEach((e,i) => {
  e.addEventListener("click", () => {
    if (e.classList.contains("rotate-arrow")) {
      sub_heading.forEach(e => {
        e.classList.remove("text-color")
        e.classList.remove("fw-700") })
    arrow_Btn.forEach(e => {e.classList.remove("rotate-arrow")});
    faq_ans_text.forEach(e=>e.innerHTML="");
    } else {
      sub_heading.forEach(e => {
        e.classList.remove("text-color")
        e.classList.remove("fw-700") })
    arrow_Btn.forEach(e => {e.classList.remove("rotate-arrow")});
    faq_ans_text.forEach(e=>e.innerHTML="");
    arrow_Btn[i].classList.add("rotate-arrow");
    sub_heading[i].classList.add("text-color");
    sub_heading[i].classList.add("fw-700");
    faq_ans_text[i].textContent = faq_answers[i];
    }
  });
});

sub_heading.forEach((e,i) => {
    e.addEventListener("click", () => {
      if (e.classList.contains("fw-700")) {
        sub_heading.forEach(e => {
          e.classList.remove("text-color")
          e.classList.remove("fw-700") })
      arrow_Btn.forEach(e => {e.classList.remove("rotate-arrow")});
      faq_ans_text.forEach(e=>e.innerHTML="");
      } else {
        sub_heading.forEach(e => {
          e.classList.remove("text-color")
          e.classList.remove("fw-700") })
      arrow_Btn.forEach(e => {e.classList.remove("rotate-arrow")});
      faq_ans_text.forEach(e=>e.innerHTML="");
      arrow_Btn[i].classList.add("rotate-arrow");
      sub_heading[i].classList.add("text-color");
      sub_heading[i].classList.add("fw-700");
      faq_ans_text[i].textContent = faq_answers[i];
      }
    });
});

For a better practice, you can watch problem solutions on YouTube, articles, and programmer communities like StackOverflow

You can ask me at any time