I have an issue with my small accordion section. I'm doing the project with NextJS, and using functional components.

So I have this section where I added an onClick event to the div symbol (plus sign) :

<article className="about__accordion">
  <div className="about__accordion--title">
    <div className="about__accordion--symbolPlus" onClick={(e)=> toggleClass(e)}
      ></div>
    <h4>who we are</h4>
  </div>
  <div className="about__accordion--description">
    <p className="about__accordion--content">
      We’re a team of dedicated multidisciplinary young people with
      knowledge and ambition to execute & deliver high quality digital
      products. The bigger the challenge, the better. We push the
      boundaries.
    </p>
  </div>
</article>

Just above I added the function :

export default function About() {
    
  const toggleClass = (event) => {
    event.preventDefault();
    let currentElement = event.currentTarget.parentElement.parentElement;

    let allAccordions = document.querySelectorAll(".about__accordion");
    allAccordions.forEach((event) => {
      let plusSymbol = currentElement.querySelector(
        ".about__accordion--symbolPlus"
      );
      let content = currentElement.querySelector(
        ".about__accordion--description"
      );

      plusSymbol.classList.toggle("active");
      content.classList.toggle("active");

    });
  };

  return (...........)

And I don't understand why toggle doesn't work, but add works fine.

Thank you for your help

CodePudding user response：

In react you can toggle or change class names by using state variables.

You may not need all these querySelector and document controls.

Here is an example

import { useState } from "react";

export default function App() {
  const [isActive, setActive] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setActive(!isActive)}>
        Click this button to toggle class
      </button>
      <p className={`normal_text ${isActive ? "active" : ""}`}>
        Start editing to see some magic happen!
      </p>
    </div>
  );
}

Working example link

https://codesandbox.io/s/heuristic-grass-px7xb?file=/src/App.js:0-427

use this method in your code to switch the class

Based on your question

1. https://codesandbox.io/s/lingering-haze-mzo94?file=/src/App.js. In this method, only one active component will be there, (you can create the contents inside loop in one another component)

2. https://codesandbox.io/s/sad-framework-ghj6x?file=/src/App.js. Other than accordion if you need to open more than one section same time then use this method. this is added for the simplest understanding of class and state (Another method of implementation on same problem)

   In this method created a small component for the accordion .

   In this method, you can open more than one section same time.

note: No code duplicated in both methods,