I made an accordion menu using HTML and CSS but I am facing an issue:

I am able to close the menus with the '-' button, but one will always remain open. How do I make it so I can close all questions if I need too (and also if I choose to open two questions, or even all three at the same time)?

Thank you.

.wizard-faq-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
  }

  .faq-container {
    width: 100%;
    margin: 0 auto;
    max-width: 30em;
  }

  .accordion-link {
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #f3f4f6;
    border-radius: 4px;
    margin-bottom: 0.9em;
    padding: 0.5em 0 0.5em 2em;
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .accordion-link:focus {
    background-color: #f3f4f6;
  }

  .accordion-link:hover {
    color: #1468a0;
  }

  .accordion-link span {
    color: #6366f1;
    padding: .5rem;
  }

  .accordion-icon-remove {
    display: none;
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 650ms;
  }

  .faq-answer::before {
    content: "";
    position: absolute;
    width: .6rem;
    height: 90%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .faq-answer p {
    font-size: 0.875rem;
    padding-left: 2em;
    color: #6b7280
  }

  .accordion-item:target .faq-answer {
    max-height: 20rem;
  }

  .accordion-item:target .accordion-link .accordion-icon-add {
    display: none;
  }

   .accordion-item:target .accordion-link .accordion-icon-remove {
    display: block;
  }

<section >
 
    <div >
      <div >

        <div  id="faq-item-1">
          <a  href="#faq-item-1">
            Q1
            <span > </span>
            <span >-</span>
          </a>
          <div >
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
          </div>
        </div>

        <div  id="faq-item-2">
          <a  href="#faq-item-2">
            Q2
            <span > </span>
            <span >-</span>
          </a>
          <div >
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
          </div>
        </div>

        <div  id="faq-item-3">
          <a  href="#faq-item-3">
            Q3
            <span > </span>
            <span >-</span>
          </a>
          <div >
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
          </div>
        </div>

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

CodePudding user response：

There are many things over.
First, you have not used js and expecting more from css

I have made it work by using JavaScript and toggle of classes, of active/clicked item

Snippet:

document.querySelectorAll(".accordion-link").forEach(function(item) {
  item.onclick = function() {
    if (!(document.querySelector(".accordion-link.clicked") == null) && !(document.querySelector(".accordion-link.clicked") == item)) {
      document.querySelector(".accordion-link.clicked").classList.toggle("clicked");
    }
    document.activeElement.classList.toggle("clicked");

  };
});

.wizard-faq-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
}

.faq-container {
  width: 100%;
  margin: 0 auto;
  max-width: 30em;
}

.accordion-link {
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid #f3f4f6;
  border-radius: 4px;
  margin-bottom: 0.9em;
  padding: 0.5em 0 0.5em 2em;
  text-decoration: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accordion-link.clicked {
  background-color: #f3f4f6;
}

.accordion-link:hover {
  color: #1468a0;
}

.accordion-link span {
  color: #6366f1;
  padding: .5rem;
}

.accordion-icon-remove {
  display: none;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 650ms;
}

.faq-answer::before {
  content: "";
  position: absolute;
  width: .6rem;
  height: 90%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.faq-answer p {
  font-size: 0.875rem;
  padding-left: 2em;
  color: #6b7280
}

.clicked .faq-answer {
  max-height: 20rem;
}

.clicked .accordion-icon-add {
  display: none;
}

.clicked .accordion-icon-remove {
  display: block;
}

<section >

  <div >
    <div >

      <div  id="faq-item-1">
        <a  href="#faq-item-1">
            Q1
            <span > </span>
            <span >-</span>
          </a>
        <div >
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
        </div>
      </div>

      <div  id="faq-item-2">
        <a  href="#faq-item-2">
            Q2
            <span > </span>
            <span >-</span>
          </a>
        <div >
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto
            nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
        </div>
      </div>

      <div  id="faq-item-3">
        <a  href="#faq-item-3">
            Q3
            <span > </span>
            <span >-</span>
          </a>
        <div >
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non
            ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
        </div>
      </div>

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