How to deactived an element only when activated an element of same class?

Question

i want to make a FAQ menu only in HTML/CSS, so when you click on one .buttonFAQ the correspondant section show up and while you didn't click on another .buttonFAQ, the question stay on the page. And i don't want that the question open/close when click on the same menu, i don't want a copy of onClick()

I want a :focus but who get disable only when you focus another .buttonFAQ element !

Sorry for my bad english.

@-webkit-keyframes slide-down
{
      0% { opacity: 0; -webkit-transform: translateY(-100%); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down
{
      0% { opacity: 0; -moz-transform: translateY(-100%); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}

#menuFAQ
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#menuFAQ *
{
  margin-left: 20px;
  margin-right: 20px;
}

.buttonFAQ a
{
  color: black;
}
.buttonFAQ a:hover
{
  color: #00BFFF;
}
.buttonFAQ a:focus
{
  background-color: red;
}
#Recurente
{
  display: flex;
}
#General
{
  display: none;
}
#Technique
{
  display: none
}
section:not(#enTete):not(#menuFAQ)
{
  width: 80%;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 100px;
  border-bottom: double;
}
input[type=checkbox]
{
   display: none;
}
label[for]
{
  -webkit-appearance: push-button;
  -moz-appearance: button;
  display: inline-block;
  margin: 10px 0 10px 0;
  cursor: pointer;
  width: 10px;
}
label[for]::before
{
  content: "+";
}

/* Etat par defaut */
input[type=checkbox] ~ .reponse
{
    margin-left: 5%;
    display: none;
    color: #00008B;
}

/* Etat activé*/
input[type=checkbox]:checked ~ .reponse
{
   display: inline-block;
   -webkit-animation: slide-down .5s ease-out;
   -moz-animation: slide-down .5s ease-out;

}
input[type=checkbox]:checked ~ label[for]::before
{
  content: "-";
}

h2
{
  font-size: 100%;
}

#FAQ
{
  align-items: center;
  justify-content: center;
  padding-top:100px;
  padding-bottom: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: center;
}

      <section id="enTete">
        <article id="FAQ">
          <h2>Foire aux questions</h2>
        </article>
      </section>
      <section id="menuFAQ">
          <div class="buttonFAQ">
            <a href="#">Question recurrente</a>
          </div>
          <div class="buttonFAQ">
            <a href="#">Question generale</a>
          </div>
          <div class="buttonFAQ">
            <a href="#">Question technique</a>
          </div>
      </section>
      <section id="Recurente">
        <h2>Question récurente</h2>
          <div class="question">
              <input type="checkbox" id="toggle-1">
              <label for="toggle-1"></label>
              <label>Date de livraison</label>
              <div class="reponse">Du lundi au vendredi. Entre 8h et 23h</div>
           </div>

           <div class="question">
             <input type="checkbox" id="toggle-2">
             <label for="toggle-2"></label>
             <label>Heure d'ouverture du magasin</label>
             <div class="reponse">Lundi de 8h a 8h30</div>
           </div>

           <div class="question">
             <input type="checkbox" id="toggle-3">
             <label for="toggle-3"></label>
             <label>Quel est la couleur de la robe ?</label>
             <div class="reponse">Bleue et noire</div>
           </div>
      </section>
      <section id="General">
        <h2>Question Generale</h2>
          <div class="question">
              <input type="checkbox" id="toggle-4">
              <label for="toggle-4"></label>
              <label>Date de livraison</label>
              <div class="reponse">Du lundi au vendredi. Entre 8h et 23h</div>
           </div>

           <div class="question">
             <input type="checkbox" id="toggle-5">
             <label for="toggle-5"></label>
             <label>Heure d'ouverture du magasin</label>
             <div class="reponse">Lundi de 8h a 8h30</div>
           </div>

           <div class="question">
             <input type="checkbox" id="toggle-6">
             <label for="toggle-6"></label>
             <label>Quel est la couleur de la robe ?</label>
             <div class="reponse">Bleue et noire</div>
           </div>
      </section>
      <section id="Technique">
        <h2>Question Technique</h2>
          <div class="question">
              <input type="checkbox" id="toggle-7">
              <label for="toggle-7"></label>
              <label>Date de livraison</label>
              <div class="reponse">Du lundi au vendredi. Entre 8h et 23h</div>
           </div>

           <div class="question">
             <input type="checkbox" id="toggle-8">
             <label for="toggle-8"></label>
             <label>Heure d'ouverture du magasin</label>
             <div class="reponse">Lundi de 8h a 8h30</div>
           </div>

           <div class="question">
             <input type="checkbox" id="toggle-9">
             <label for="toggle-9"></label>
             <label>Quel est la couleur de la robe ?</label>
             <div class="reponse">Bleue et noire</div>
           </div>
      </section>