'CSS Accordion focus color and close on click

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 class="wizard-faq-section">
 
    <div class="faq-container">
      <div class="faq-accordion">

        <div class="accordion-item" id="faq-item-1">
          <a class="accordion-link" href="#faq-item-1">
            Q1
            <span class="accordion-icon-add">+</span>
            <span class="accordion-icon-remove">-</span>
          </a>
          <div class="faq-answer">
            <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 class="accordion-item" id="faq-item-2">
          <a class="accordion-link" href="#faq-item-2">
            Q2
            <span class="accordion-icon-add">+</span>
            <span class="accordion-icon-remove">-</span>
          </a>
          <div class="faq-answer">
            <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 class="accordion-item" id="faq-item-3">
          <a class="accordion-link" href="#faq-item-3">
            Q3
            <span class="accordion-icon-add">+</span>
            <span class="accordion-icon-remove">-</span>
          </a>
          <div class="faq-answer">
            <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>

html css

Solution 1:^[1]

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 class="wizard-faq-section">

  <div class="faq-container">
    <div class="faq-accordion">

      <div class="accordion-item" id="faq-item-1">
        <a class="accordion-link" href="#faq-item-1">
            Q1
            <span class="accordion-icon-add">+</span>
            <span class="accordion-icon-remove">-</span>
          </a>
        <div class="faq-answer">
          <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 class="accordion-item" id="faq-item-2">
        <a class="accordion-link" href="#faq-item-2">
            Q2
            <span class="accordion-icon-add">+</span>
            <span class="accordion-icon-remove">-</span>
          </a>
        <div class="faq-answer">
          <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 class="accordion-item" id="faq-item-3">
        <a class="accordion-link" href="#faq-item-3">
            Q3
            <span class="accordion-icon-add">+</span>
            <span class="accordion-icon-remove">-</span>
          </a>
        <div class="faq-answer">
          <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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Neptotech -vishnu

'CSS Accordion focus color and close on click

Solution 1:[1]

Snippet:

Sources

Related Questions

Solution 1:^[1]