Steps to create a toggle feature for the FAQ accordion

Question

Steps to create a toggle feature for the FAQ accordion

I am currently working on creating an interactive FAQ accordion with specific features in mind: 1- Only one question and answer visible at a time (I have achieved this) 2- When toggling the open question, it should close automatically (having trouble with this)

Check out this CodePen link for a preview of what I've accomplished so far: https://codepen.io/simokitkat/pen/yLEONpo?editors=0010

Here is the HTML code snippet:

<div class="text">
        <h1>FAQ</h1>
        <ul>
          <li>
            <div class="question">
              <h2>How many team members can I invite?</h2>
            </div>
            <p>You can invite up to 2 additional users on the Free plan. There is no limit on team members for the
              Premium
              plan.
            </p>
          </li>
          <li>
            <div class="question">
              <h2>What is the maximum file upload size?</h2>
            </div>
            <p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
          </li>
         <!--Additional list items here-->
        </ul>
      </div>

javascript html css

Answer 1

Answer №1

If you want to incorporate the details tag in your HTML, here's a code snippet that demonstrates how to use it:

const details = document.querySelectorAll("details");

details.forEach((el) => {
  el.addEventListener("click", () => {
    details.forEach((detail) => {
      if (detail !== el) {
        detail.removeAttribute("open");
      }
    });
  });
});

<details>
  <summary>How many team members can I invite?</summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
  </p>
</details>

<details>
  <summary>How many team members can I invite?</summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
  </p>
</details>

Answer 2

If you want to incorporate the details tag in your HTML, here's a code snippet that demonstrates how to use it:

const details = document.querySelectorAll("details");

details.forEach((el) => {
  el.addEventListener("click", () => {
    details.forEach((detail) => {
      if (detail !== el) {
        detail.removeAttribute("open");
      }
    });
  });
});

<details>
  <summary>How many team members can I invite?</summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
  </p>
</details>

<details>
  <summary>How many team members can I invite?</summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
  </p>
</details>

Steps to create a toggle feature for the FAQ accordion

Answer №1

Similar questions

Combining PHP code within JavaScript nested inside PHP code

When you click on the text, the calendar will pop up for you to

Node Express for Advanced Routing

React State not refreshing

Combining PHP JQuery Dialog with Datatables results in a sleek design loss

Next.js experiencing development server compile errors and broken page routing in production builds

Position two div elements evenly with text enclosed in a container

Leverage the model attribute in a Spring controller to conditionally display elements using

Encountering an error in a React application with Redux: "Unable to access the 'state' property of undefined"

Customize specific styles for individual divs one at a time (without the use of jQuery)

AngularJS - Unusual outcomes observed while utilizing $watch on a variable from an external AngularJS service

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Seamlessly replacing an image in PixiJS without any sudden movement

Learn the process of incorporating a plugin into a React JS project

Ways to apply styles to the final element containing a specific class within a nested list using CSS

Update picture using Vanilla Javascript for mobile display

Describing a function in Typescript that takes an array of functions as input, and outputs an array containing the return types of each function

Updates to AngularJs models are not being reflected

Submit a form using Ajax without having to reload the page

Is there a way to simulate a click event (on a file type input) within a promise?