Bonjour à toutes et tous,

Je me permets de poster un topic car je m'arrache depuis plusieurs jours le peu de cheveux que j'ai sur la tête sur une re-factorisation de code pour une petite app.

Voici l'idée: il s'agit d'une simple page web type "arbre de décision". J'ai deux sections qui resteront visibles, les réponses sont dans des sections masquées en display: none;, en fonction du choix de réponse de l'utilisateur elles s'afficheront avec une petite animation CSS issue d'une librairie tierce.

J'ai donc créer mon squelette HTML comme suit:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<header>
      <h1>
        Mon super titre de la mort qui tue
      </h1>
    </header>
    <main>
      <section id="init"><!-- Cette section restera toujours visible -->
        <p>
          <i>Icône Font Awesome pour faire joli</i>
          Ma thématique
        </p>
      </section>
      <section id="question_1" class="is_active"><!-- Cette section restera aussi toujours visible -->
        <p>
          <i>Oui ç fait joli </i>
          Ma première question
        </p>
        <a class="btn btn-outline-success" id="step_1" href="#next_1">Oui</a><!-- Lien avec une classe Bootstrap pour styliser en bouton -->
        <a class="btn btn-outline-danger" id="no_1" href="#next_no_1">Non</a>
      </section>
 
<section id="next_1" class="animate__animated"><!-- Classe pour la librairie animate.css afin donner un effet -->
        <p>
          <i>Encore une icône</i>
          Ma deuxième question
        </p>
        <a id="step_2" href="#next_2" class="btn btn-outline-success">Oui</a>
        <a id="no_2" href="#next_no_2" class="btn btn-outline-danger">Non</a>
      </section>

Les sections de mon arbre se succèdent toutes avec le même format d'id et classe CSS, mais à part les deux sections commentées qui restent visibles, les autres sont masquées et apparaissent en fonction du choix de l'utilisateur, avec le petit effet d'animate.css.

J'ai réussi à le faire fonctionner mais en codant en dur/procédural/pas du tout optimisé mon JS. Je mettait bien l'écouteur sur le parent du lien, et en allant chercher l'id des sections, j'arrivais bien à toggle la classe CSS (je souhaite bien utiliser le toggle), en pensant de cette manière:

Au click du lien
- la section correspondant au href cliqué toggle la classe CSS
- j'ajoute ma classe CSS de la librairie animate (qui est "animate__bounceInDown", je ne peux pas la mettre dans le HTML lorsque je le fais l'animation ne fonctionne pas)
- j'enlève la classe CSS "is_active" de la section cloquée
- j'ajoute la classe CSS "is_active" à la section qui apparait


Je sollicite votre aide car j'ai réussi à coder et avoir le résultat souhaité en répétant mon code encore et encore pour chaque choix possible. Depuis plusieurs jours, je cherche à faire une boucle qui serait beaucoup plus propre et maintenable. Je pense qu'a force d'être dessus mon esprit s'embrouille, je vois pas sur quoi je dois boucler et ça m'énerve voilà pourquoi je me permets de poster ce sujet.

Je suis ouvert à toutes propositions, y compris ne pas mettre de JS et utiliser du CSS, tant que le résultat est le même.

Par avance un immense merci aux personnes qui prendront le temps de m'aider.

Bonne fin de semaine, ou week-end