Fermer un bloc lorsque l'on re-clique dessus - HTML

Bonjour à tous,

J'ai réussi en suivant un tutoriel et en le personnalisant à réaliser un système de questions/réponses pour ma page FAQ sur mon site internet. J'utilise Shopify et je ne suis pas experte en code.

Voici ce que cela donne : Toutes les questions sont initialement fermées. Dès que l'on clique sur la question A, elle s'ouvre, puis lorsque l'on clique sur la question B, la question B s'ouvre et la A se ferme. J'aimerais conserver ces fonctionnalités mais également faire en sorte que lorsque l'on clique sur le bandeau de n'importe qu'elle question ouverte, elle se ferme.

J'espère que ma demande est claire ? J'ai essayé de modifier le code mais en vain, quelqu'un a t-il une solution s'il vous plait ?

De ce que je comprends le code que j'ai personnalisé est un "système d'onglet toujours ouvert" et non un "système d'accordéon", mais je garde encore espoir :)

Pour information, j'ai utilisé une balise style directement dans le HTML car c'est plus simple pour moi (et le tutoriel était comme ça). Mon objectif est de tout mettre dans la feuille HTML et de ne pas toucher aux templates CSS, c'est probablement une très mauvaise pratique désolée mais j'essaie de faire au mieux et au plus simple pour moi.

Voici un extrait de mon code (Je vais jusqu'à 10 questions sur mon site, mais là je vous en mets seulement 5 pour exemple) :
<style type="text/css"><!--
.faq {
position: relative;
}
.faq input { display: none; }
.faq input:checked + label {
background: -webkit-linear-gradient(top,#ccc,#ccc);
color: #000;
font-size:100%;
font-weight: bold;
}
.faq label {
font-family: helvetica;
cursor: pointer;
display: block;
height: auto;
text-align: left;
padding:15px;
padding-left:15px;
margin:0;
padding-right: 15px;

color: #333;
font-size:100%;
border:1px solid #ddd;
border-bottom: 0;
font-weight: bold;
background: -webkit-linear-gradient(top,#fff,#eee);
}
.faq label:before {
content:"+";
line-height:21px;
font-size:21px;
margin-right:5px;
}
.faq input:checked + label:before {
content:"-";
}
.faq label:last-child { margin-right: 0; }
.faq label:hover {
background: -webkit-linear-gradient(top,#fff,#eee);
}
.faq article {
max-height: 0;
overflow: hidden;
transition: max-height 0.15s ease-out;
position: relative;
margin-bottom: 0;
top:0;
padding:10px 10px 10px 10px;
color: #333;
opacity: 0;
border:1px solid #ddd;
}
.faq div > input:checked ~ article {
max-height: 500px;
opacity: 1;
margin-bottom:12px;
transition: max-height 0.25s ease-in;
}​
--></style>
<form class="faq">
<h3 class="faq-wrapper"><strong>Section 1</strong></h3>
<div class="faq-wrapper">
<input type="radio" name="size" id="faq1" value="faq1"> <label for="faq1">Question 1</label>
<article>
<p>Réponse 1</p>
</article>
</div>
<div class="faq-wrapper">
<input type="radio" name="size" id="faq2" value="faq2"> <label for="faq2">Question 2</label>
<article>
<p>Réponse 2</p>
</article>
</div>
<div class="faq-wrapper">
<input type="radio" name="size" id="faq3" value="faq3"> <label for="faq3">Question 3</label>
<article>
<p>Réponse 3</p>
</article>
</div>
<div class="faq-wrapper">
<input type="radio" name="size" id="faq4" value="faq4"> <label for="faq4">Question 4</label>
<article>
<p>Réponse 4</p>
</article>
<h3 class="faq-wrapper" style="margin-top: 10px;"><strong>Section 2</strong></h3>
<div class="faq-wrapper">
<input type="radio" name="size" id="faq5" value="faq5"> <label for="faq5">Question 5?</label>
<article>
<p>Réponse 5</p>
</article>
</div>
</div>
</div>
</form>

Un très grand merci par avance pour votre aide !

Bonne journée,