Faire apparaître/disparaître un texte lorsque l'on clique

sanjiruss Messages postés 2 Date d'inscription lundi 12 juin 2023 Statut Membre Dernière intervention 13 juin 2023 - 12 juin 2023 à 14:16
sanjiruss Messages postés 2 Date d'inscription lundi 12 juin 2023 Statut Membre Dernière intervention 13 juin 2023 - 13 juin 2023 à 10:01

Bonjour à tous,

J'aimerais pour un site faire une FAQ avec des thèmes qui regrouperaient différentes questions. ce que je cherche à obtenir c'est un thème général où lorsque l'on clique dessus les questions apparaissent, puis qu'on puisse également cliquer sur ces questions pour y faire apparaître la réponse souhaitée.

Je suis néophyte en HTML et en m'inspirant d'un bout de code que j'avais trouvé sur internet j'ai essayé d'obtenir le résultat escompté mais sans succès. Le problème étant que je n'arrive pas à faire apparaître la réponse voulue  en dessous de la question concernée, en cliquant sur la question la réponse apparaît en dessous de toute les questions.(dans le code ci dessous la réponse 1 apparaît donc en dessous de la question 2)

Et malgré plusieurs essais et modifications le résultat le plus proche que j'ai obtenu est celui ci:

Quelqu'un aurait une idée de comment obtenir ce que je souhaite ? Je vous remercie par avance de votre aide.

A voir également:

3 réponses

jee pee Messages postés 39705 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 9 mai 2024 9 264
12 juin 2023 à 15:19

Bonjour,

Tu pourrais regarder les balises HTML <details> et <summary>

<details>
  <summary>FAQ</summary>

<details>
  <summary>Theme 1</summary>

<details>
  <summary>Question 1</summary>
  <p>réponse 1  </p>
</details>
<details>
  <summary>Question 2</summary>
  <p>réponse 2  </p>
</details>
<details>
  <summary>Question 3</summary>
  <p>réponse 3  </p>
</details>

</details>

<details>
  <summary>Theme 2</summary>

<details>
  <summary>Question 1</summary>
  <p>réponse 1  </p>
</details>
<details>
  <summary>Question 2</summary>
  <p>réponse 2  </p>
</details>
<details>
  <summary>Question 3</summary>
  <p>réponse 3  </p>
</details>

</details>

</details>

0
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
12 juin 2023 à 15:19

bonjour,

Voici une piste de ce que tu cherche à faire .

https://www.w3schools.com/howto/howto_js_accordion.asp


0
sanjiruss Messages postés 2 Date d'inscription lundi 12 juin 2023 Statut Membre Dernière intervention 13 juin 2023
13 juin 2023 à 10:01

Merci pour vos réponses rapides, je vais essayer avec les deux méthodes et voir ce qui me convient le mieux. 

0