Javascript Menu Accordion Don't word-CodePudding

I am a beginner in programming, and I am trying to create a FAQ for my portfolio site.

I'm using the tailwind css framework and I'm not getting accordion with javascript, could you help me?

I have the class accordion__item when clicked on the element, I want it to show the content contained in the accordion__content paragraph element, and when clicked again, that it closes the content. Can you help me?

let item = document.getElementsByClassName("accordion__item");
let i;

for (i = 0; i < item.length; i  ) {
  item[i].addEventListener("click", function() {
    this.classList.toggle("open");
  });
}

.open {
  display: block
}

<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="./modal.js"></script>
</head>

<body>
  <section >
    <div >
      <h1 >Frequently asked questions</h1>

      <div >
        <div >
          <button >
                            <h1 >How i can play for my appoinment ?</h1>
    
                            <span >
                                <svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
                                </svg>
                            </span>
                        </button>

          <hr >

          <p >
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
          </p>
        </div>




      </div>
    </div>
  </section>
</body>

CodePudding user response：

The problem here is that you are toggling display: block. Initially elements are either block or inline based on their nature. Next thing is that you are toggling it on the container which contains the toggle button as well.

To fix it we need to toggle the display: none which is actually hiding elements and move the class toggle target from the container to its content.

let item = document.getElementsByClassName("accordion__item");
let i;

for (i = 0; i < item.length; i  ) {
  item[i].addEventListener("click", function() {
    this.querySelector('.accordion__content').classList.toggle("d-none");
  });
}

.open {
  display: block
}

.d-none {
  display: none
}

<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="./modal.js"></script>
</head>

<body>
  <section >
    <div >
      <h1 >Frequently asked questions</h1>

      <div >
        <div >
          <button >
                            <h1 >How i can play for my appoinment ?</h1>
    
                            <span >
                                <svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
                                </svg>
                            </span>
                        </button>

          <hr >

          <p >
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus?
          </p>
        </div>




      </div>
    </div>
  </section>
</body>

CodePudding user response：

So in this situation, the "accordion__content" should be display: none always. Then you can check for the open class and turn accordion__content into display: block.

.accordion__content {
  display: none;
}

.open .accordion__content {
  display: block;
}