18041 sujets

Questions générales et questions de débutants

[Résolu] Masquer/afficher un bloc de texte au clic

Bonjour à tous,

Est-il possible de faire en pur html / css (sans javascript) une foire aux questions avec les questions visibles, et les réponses qui apparaissent en cliquant sur les questions comme dans cet exemple : https://www.service.eau.veolia.fr/FAQ

Y'a t'il un tutoriel sur ce site ou ailleurs pour réaliser cela ?

Merci beaucoup et bonne journée à tous !
Modifié par Aboudri (16 Jan 2020 - 15:27)
Bonjour Jean Pierre et merci pour ta réponse.

Et bien comme tu as pu lire, je recherche l'effet décrit dans mon précédent message et visible depuis le lien, mais en pur html / css. Ma question est de savoir si c'est faisable et si un exemple ou un tuto existait afin que je puisse m'en inspirer. Si j'avais trouvé un exemple en pur html / css je ne viendrai pas ici poser la question tu t'en doutes bien Smiley smile
Je ne comprends pas comment tu vois les choses: si tu veux déclencher une action en cliquant sur quelque chose, il faut bien décrire cette action quelque part .
Quand tu cliques sur un lien pour lancer une autre page, le navigateur interprète <a href="xxx"> comme "charger la page xxx", mais à ma connaissance c'est la seule action qu'on puisse déclencher sans javascript
Bonjour,

@PapyJP: pas tout à fait.

En effet, on peut obtenir ce genre de résultat selon au moins 2 façons à ma connaissance.

La plus lourde à mettre en place nécessite de l'usage du pseudo-élément :target. Un exemple simple

La plus simple mais peut-être la moins compatible est d'utiliser les balises details et summary. J'utilise cette technique dans un back-office, c'est redoutable et enfantin.
Modérateur
Salut,

Je te propose une piste de plus : utiliser des radios bouton https://jsfiddle.net/undless/9ckap172/

<label class="question" for="faq1">FAQ1</label>
<input id="faq1" type="radio" name="faq">
<div class="reponse">Réponses</div>

<label class="question" for="faq2">FAQ2</label>
<input id="faq2" type="radio" name="faq">
<div class="reponse">Réponses</div>


.question {
  border: 1px solid red;
  padding: 5px;
  display: block;
  cursor: pointer;
}
.reponse {
  border: 1px solid blue;
  padding: 10px;
  display: none;
}

input {
  display: none;
}
input:checked + .reponse {
  background: red;
  display: block;
}


Bonne journée
Bonne(s) remarque(s), c'est parce que je me doutais bien qu'il y avait un loup que j'ai dit "à ma connaissance". Smiley smile
Il est vrai que je ne m'occupe depuis longtemps que de sites qui utilisent le JavaScript à (très) haute dose, je suis addict au JavaScript.
Modifié par PapyJP (20 Jan 2020 - 11:15)
Modérateur
Et l'eau,

Dans l'exemple de Veolia, il n'y a pas de JS (pour la gestion des questions et réponses) ! Ce sont des pages statiques (template view / vue gabarit). Pourquoi avoir fait cela ? Pour le référencement.

@Aboudri :
Je t'invite à regarder ces liens :
- details
- Si tu as énorméments de questions dans ta page, tu peux utiliser ce genre de techniques ( Faire un lien vers un endroit précis de la page) pour rediriger ton utilisateur suivant les thèmes de tes questions réponses
Modifié par niuxe (17 Jan 2020 - 21:28)
Meilleure solution
Bonjour à tous,

Merci beaucoup pour toutes vos réponses détaillées et complètes.
C'est toujours un plaisir de trouver des personnes impliquées et bienveillantes sur ce forum.

J'ai opté pour la bonne vieille technique des ancres et je verrai pour tester (dès que j'ai le temps ) celle de l'élément HTML <details> qui m'était inconnue.

Encore merci et bonne semaine !
Modifié par Aboudri (20 Jan 2020 - 10:19)
Sujet clos
Aller à