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

Issues with navigating sliders

React version 0.13.3 is throwing an error stating that the Super expression must be either null or a function, not an

Looking for Precise Matching within JSON Using JavaScript

React: automatically close other SubMenus when a new SubMenu is opened

leveraging the dispatch instance of the redux store as opposed to including dispatch as a parameter

"Utilizing Bootstrap to ensure content is aligned perfectly to the baseline

The error encountered in Heroku logs is due to a Mongoose error where the uri parameter passed to openURI() must be a string, but is

When using Selenium to locate an element, it appears to be returning an unexpected empty object

Shifting annotations on a Bar Graph featuring Negative Values on Google's Chart Maker

Guide to verify the user selection within a select form

What could be causing the erratic jumping behavior of the "newsletter sign-up" form within my modal dialog window?

What is a way to automatically run a function at specific intervals in PHP, similar to the setTimeout() function in JavaScript?

Struggling to get the max-width property to function properly with a Bootstrap multi-level dropdown menu

Hide the HTML DIV without altering the position of the current div

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

When attempting to access the Object data, it is returning as undefined, yet the keys are being

Is it possible to validate a template-driven form without using the model-driven approach?

The QWebview is not rendering the HTML page correctly

How to transfer a multitude of user inputs to a Django view

How to Implement Double Click Functionality in VueJS