Refermer une section ouverte

Voici mon code HTML il marche parfaitement pour l'usage dont j'ai besoins le seul probléme c'est que j'aimerais que les section "QUESTION 1", "QUESTION 2"... se referment lorqu'on rappuie sur la question. Je suis débutante et je n'arrive pas trouver la solution si quelq'un peut me donner un coup de main s'il vous plait ?

Bonne journée

<style type="text/css"><!--
.faq { 
 position: relative; 
}
.faq input { display: none; }
.faq input:checked + label { 
 background: -webkit-linear-gradient(top,#f00433,#f00433); 
 color: none; 
 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 none;
 border-bottom: 0;
 font-weight: bold; 
 background: -webkit-linear-gradient(top,#04abf2,#04abf2); 
}
.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,#eee,#ddd); 
}
.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: #fcfdfd; 
 opacity: 0;
 border:1px solid none;
}
.faq div > input:checked ~ article { 
 max-height: 500px;
 opacity: 1;
 margin-bottom:12px;
 transition: max-height 0.25s ease-in; 
}?
--></style>
<form class="faq">
<div class="faq-wrapper"><input type="radio" name="size" id="faq1" value="faq1" /> <label for="faq1">QUESTION 1</label>
<article>
<p>REPONSE 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>REPONSE 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>REPONSE 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>REPONSE 4</p>
</article>
</div>
<div class="faq-wrapper"><input type="radio" name="size" id="faq5" value="faq5" /> <label for="faq5">QUESTION 5</label>
<article>
<p>REPONSE 5</p>
</article>
</div>
</form>

Bonjour,

Il faudrait utiliser des <input type="checkbox"> au lieu de <input type="radio"> (et évidemment leur donner un name différent pour chacun d'entre eux car ça ne fonctionne pas pareil, les checkbox et les radio).

La raison pour laquelle les checkbox vont marcher est qu'ils changent d'état à chaque fois qu'on clique dessus. Alors que les radio, eux, ne changent d'état que si on clique sur un autre radio ayant le même name.

EDIT: tu pourrais éventuellement remplacer ton système à base de <input> par des balises <details>. Ça me semble indiqué ici (à la condition que tout ça ne soit pas un formulaire dont tu récupères les résultats par la suite).

Amicalement,

PS: tu as un ? qui traine à la fin de ton css, qu'il faudrait retirer
Modifié par parsimonhi (24 Nov 2020 - 11:25)

Bonjour merci beaucoup pour ta réponse ! Cependant je n'est pas bien compris ce que tu veut dire atravers "leur donner un nom differents pour chacun d'entre eux ..."

Tu veut dire changer le "name=size"? je pourras mettre quoi a la place Size1, size 2 ..?
Désolé

parsimonhi a écrit :
Bonjour,

Il faudrait utiliser des &lt;input type="checkbox"&gt; au lieu de &lt;input type="radio"&gt; (et évidemment leur donner un name différent pour chacun d'entre eux car ça ne fonctionne pas pareil, les checkbox et les radio).

La raison pour laquelle les checkbox vont marcher est qu'ils changent d'état à chaque fois qu'on clique dessus. Alors que les radio, eux, ne changent d'état que si on clique sur un autre radio ayant le même name.

EDIT: tu pourrais éventuellement remplacer ton système à base de &lt;input&gt; par des balises &lt;details&gt;. Ça me semble indiqué ici (à la condition que tout ça ne soit pas un formulaire dont tu récupères les résultats par la suite).

Amicalement,

PS: tu as un ? qui traine à la fin de ton css, qu'il faudrait retirer

Modifié par selavie (24 Nov 2020 - 12:58)

Voici ou j'en suis (J'ai raccourci le nombre de Questions et Réponses pour l'exemple)

<style type="text/css"><!--
.faq { 
 position: relative; 
}
.faq details{ display: none; }
.faq details:checked + label { 
 background: -webkit-linear-gradient(top,#f00433,#f00433); 
 color: none; 
 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 none;
 border-bottom: 0;
 font-weight: bold; 
 background: -webkit-linear-gradient(top,#04abf2,#04abf2); 
}
.faq label:before {
 content:"+";
 line-height:21px;
 font-size:21px; 
 margin-right:5px; 
}
.faq details:checked + label:before {
 content:"-";
}
.faq label:last-child { margin-right: 0; }
.faq label:hover { 
 background: -webkit-linear-gradient(top,#eee,#ddd); 
}
.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: #fcfdfd; 
 opacity: 0;
 border:1px solid none;
}
.faq div > details:checked ~ article { 
 max-height: 500px;
 opacity: 1;
 margin-bottom:12px;
 transition: max-height 0.25s ease-in; 
}
--></style>
<h4 style="text-align: center;">TITRE FAQ 1</h4>
<form class="faq">
<div class="faq-wrapper">
<details type="checkbox" name="size1" id="faq1" value="faq1"> <label for="faq1">Q1</label>
<article>
<p style="text-align: center;">R1</p>
</article>
</details>
</div>
<div class="faq-wrapper">
<details type="checkbox" name="size2" id="faq2" value="faq2"> <label for="faq2">Q2</label>
<article>
<p style="text-align: center;">R2</p>
</article>
</details>
</div>
<h4 style="text-align: center;">TITRE FAQ 2</h4>
<div class="faq-wrapper">
<details type="checkbox" name="size3" id="faq3" value="faq3"> <label for="faq3">Q3</label>
<article>
<p style="text-align: center;"><span style="color: #ffffff;">R3</span></p>
<p style="text-align: center;"> </p>
</article>
</details>
</div>
</form>

Modifié par selavie (24 Nov 2020 - 13:03)

Bonjour,

Hum, alors, c'est soit des <input type="checkbox"> soit des balises <details>. Mais ce n'est pas du tout <details type="checkbox">.

Si tu choisis la solution <input type="checkbox">, tu reprends exactement ce que tu avais posté lors de ton premier post, tu remplaces les "radio" par "checkbox", et tu remplaces les "size" par "size1", "size2", etc. et puis ça devrait marcher direct. C'est le plus facile vu ce que tu as déjà fait.

Si par contre, tu voulais utiliser <details>, il faut tout refaire en entier car ce n'est pas du tout la même logique. On n'utilise plus de balises <label> (à la place, c'est une balise <summary>) , on n'utilise pas les attributs "type", et le css sera complètement différent. Bref, rien n'est pareil.

Dans un premier temps, je te conseille de faire marcher ta page avec les <input type="checkbox">. Tu ne me sembles pas prête pour tout refaire avec la balise <details>.

Amicalement,
Modifié par parsimonhi (24 Nov 2020 - 13:38)

Okay merci ! Je vais essayer !


Modifié par selavie (24 Nov 2020 - 14:04)

Bonjour,

selavie a écrit :
Comme ceci donc ? Parce que regardez aller jeter un coup d'oeil a mon site s'il vous plaît, ça ne fonctionnent pas https://boxfoot.fr/pages/faq
...

Oui, ta modification devrait fonctionner. Mais tu ne l'as pas encore mis sur ton site, il me semble !

Note : les balises <style> doivent être dans la partie <head> de la page de préférence. Ça marche quand même quand elles sont dans la partie <body> (comme tu l'as fait pour certaines), mais c'est un coup de bol en théorie (je dis en théorie parce que ceux qui font les normes changent d'avis régulièrement sur ce point précis : c'est la vie ).

Amicalement,
Modifié par parsimonhi (24 Nov 2020 - 14:09)