Créer une FAQ dynamique
Profil introuvable Le 23 juin 2016 à 23:51 (Édité le 25 janvier 2019 à 17:51)
Je voudrais avoir une FAQ dynamique sur mon site dont voici un exemple : https://www.sosvirus.net/support/faq.php
Je voudrais que cela fasse exactement pareil, lorsqu'on clique sur la question alors la réponse est affiché, de manière design. Je voudrais la même transaction de l'exemple que je vous ai donnez. Pouvez-vous m'éclairer ?
Merci à tous ceux qui pourront m'aider 😉
TheFlameflo Le 24 juin 2016 à 01:59
Déjà, il faut analyser le code HTML/CSS d'une box.
Le code est celui-ci:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" aria-expanded="false" title="" data-original-title="" data-toggle="collapse" data-parent="f0r0" href="#f0r0">
Pourquoi dois-je m’enregistrer ?
</a>
</h4>
</div>
<div aria-expanded="false" style="height: 0px;" id="f0r0" class="panel-collapse collapse">
<div class="panel-body">
Vous pouvez ne pas le faire, mais l’administrateur du forum peut avoir configuré les forums afin qu’il soit nécessaire de s’enregistrer pour poster des messages. Par ailleurs, l’enregistrement vous permet de bénéficier de fonctionnalités supplémentaires inaccessibles aux invités comme les avatars personnalisés, la messagerie privée, l’envoi d’e-mails aux autres membres, l’adhésion à des groupes, etc. La création d’un compte est rapide et vivement conseillée.
</div>
</div>
</div>
On clique sur a.collapsed.
panel-collapse devient panel-collapse collapsing pour la transition qui a le code :
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height,visibility;
-o-transition-property: height,visibility;
transition-property: height,visibility;
collapse a la propriété display:none et .in a la propriété display:block.
Bref, en gros, quand on clique sur le lien, ça devient .collapsing et enfin .collapse .in.
Ensuite, on reclique et ça devient .collapsing et ensuite .collapse.
Je peux te donner quelques pistes :
Il faut utiliser le Javascript (je te conseille quand même jQuery, beaucoup plus efficace pour ce genre de chose).
Ensuite, il faudrait utiliser l'événement [url=https://api.jquery.com/click/].click
[/url]Couplé avec [url=http://api.jquery.com/toggleclass/]toggleClass
[/url]Pour pouvoir activé les classes et les désactiver.
Si tu as besoin d'aide ou plus d'explications, n'hésite pas.
J'espère avoir pu t'aider ! 😀
Profil introuvable Le 24 juin 2016 à 03:23 (Édité le 24 juin 2016 à 03:24)
Merci pour ce début 'TheFlameflo', mais j'aimerais que tu puisses continuer et qu'à la fin tu me dises qu'est-ce que je dois faire pour l'insérer dans le code source de mon site 😀
Je commence à comprendre, mais il manque encore quelques explications 😰 😄
TheFlameflo Le 24 juin 2016 à 03:48
Malheureusement, je ne pense pas pouvoir plus t'aider vu mon niveau en jQuery (j'ai appris sur le tas, comme ici ).
Du coup, j'espère que quelqu'un d'un peu plus expérimenté que moi en JS pourra t'aider, bonne chance pour la suite ! 😀
Profil introuvable Le 24 juin 2016 à 14:22
Merci 'TheFlameflo', d'avoir pris le temps pour m'aider 😀 Dommage que tu ne puisses pas m'en dire plus... 😒
Quelqu'un d'autre peut-il m'aider ?
Balatharas Le 2 juillet 2016 à 20:04
<script>
function toggle_text(id) {
var span = document.getElementById(id);
if(span.style.display == "none") {
span.style.display = "inline";
} else {
span.style.display = "none";
}
}
</script>
<button type="button" onclick="toggle_text('span_txt');">Texte du bouton</button>
<br /><span id="span_txt" style="display: none;">
ddssdffdf
</span>
Profil introuvable Le 3 juillet 2016 à 02:10
Merci 'Beignet', je vais regarder cela 😉 Pour le CSS je n'en aurai pas besoin a part pour les transitions, je vais voir 😉
