When I click on a question, it opens the text inside it, and when I click on another question, the previous question closes But when I open a question and click on the same question again, it doesn't close, and this is the problem I think it's because I did something wrong in the If statement

[image of my project] [1]: https://i.stack.imgur.com/MtFPf.png

import { useRef } from "react";
import img_1 from "../images/bg-pattern-desktop.svg";
import img_2 from "../images/illustration-woman-online-desktop.svg";

export default function MainContent() {
  const p1 = useRef(null);
  const p2 = useRef(null);
  const p3 = useRef(null);
  const p4 = useRef(null);
  const p5 = useRef(null);

  const elementsArray = [p1, p2, p3, p4, p5];

function hideText(element) {
    for (let i = 0; i < 5; i  ) {
       if (!elementsArray[i].current.classList.contains("not-active")) {
           elementsArray[i].current.classList.add("not-active");
       } 
       if (element.current.classList.contains("not-active")) {
           element.current.classList.remove("not-active");
      }
    }
  }

  return (
    <>
      <div className="container">
        <div className="imgBox">
          <img src={img_1} alt="img_1" className="img_1" />
          <img src={img_2} alt="img_2" className="img_2" />
        </div>

        <div className="textBox">
          <h1>FAQ</h1>
          <div className="questions">
            <div>
              <button
                onClick={() => {
                  hideText(p1);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p1} className="p1 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p2);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p2} className="p2 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p3);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p3} className="p3 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p4);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p4} className="p4 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p5);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p5} className="p5 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />
          </div>
        </div>
      </div>
    </>
  );
}

CodePudding user response：

what you want here is to toggle 'not-active' class on the triggered button right?

you can doit just with this line of code:

element.current.classList.toggle('not-active');

replace it with the old one:

if (element.current.classList.contains("not-active")) {
       element.current.classList.remove("not-active");
  }