Afficher que le contenu de la catégorie correspondante !

Bonjour, tout le monde, j’ai crée un bouton avec menu déroulant bootstrap,
à chaque que l’utilisateur clique sur une catégorie du menu déroulant, il y a le contenu correspondant qui apparait, MAIS celui-ci ne disparais pas lorsque l’utilisateur clique sur une autre catégorie !
Moi je voudrais que l’utilisateur, quand il clique sur une catégorie, que le contenu qui s’affiche et efface le contenu des autres catégorie.
Vous pensez que je peux faire comment ?

Voici ce que j’ai fait, oui je me suis pris la tête, mais c’est la seule solution conqurète que google m’offre : https://codepen.io/anon/pen/NgLLxL

Merci

Problème de logique

Tu n’as aucun bogue dans ton utilisation, ton problème est un problème de pure logique. Comment retirer « toutes » les autres catégories sauf celle que je viens de réclamer ?

Une technique simple en informatique est de procéder comme suit :

Sur l’action de « afficher une catégorie », il faut d’abord penser à utiliser une action « désélectionner toutes les catégories » avant.

Ainsi au début tu as [x, x, x] par exemple (aucune catégorie sélectionnée), puis tu cliques sur la seconde (par exemple) ce qui enclenche le processus suivant :

  1. [x, x, x] (on met tout à vide, ce qui ne change rien dans ce cas)
  2. [x, o, x] (on sélectionne la seconde)

Si maintenant tu choisis la 3 ça donne :

  1. [x, x, x] (on met tout à vide, ce qui retire la 2)
  2. [x, x, o] (on sélectionne la troisième)

D’un point de vu utilisateur, la séquence pour « retirer le tout » avant d’en « sélectionner un » ne se voit pas, aussi on a simplement l’impression qu’on sélectionne une autre catégorie.

J’ai fait une réplique (fork) de ton codepen en alimentant ton JS pour répondre à ta problématique. Pour mieux le comprendre, je t’invite d’abord à prendre en note ma relecture de code.

Bonnes pratiques à suivre

Tu parles « de prise de tête ». On appel ça « complexité ». Une même chose peut-être faites de plusieurs manières, et, plus un code est « long » et « répétitif » plus il est difficile de faire des parallèles pour le lecteur/relecteur et plus il est « complexe ». Il est donc important de « factoriser » son code en utilisant des variables.

Ensuite, d’un point de vu technique, on appel la complexité cyclomatique la complexité d’un point de vu logique : une fonction est réputée plus « maintenable » si sa complexité cyclomatique est faible. http://jshint.com/ permet de tester cette complexité.

HTML

L’imbrication

Quand un élément contient des balises de type inline, il est convenable de garder le tout sur une ligne :

<li role="presentation"><a ...>Automobile</a></li>

Mais quand un élément contient des balises de type block, il est convenu de les ramener à la ligne. Les balises fermantes occupent une nouvelle ligne (note que j’ai encadré ton texte dans un

pour paragraphe).

<div class="pub-bank" id="act-bank">
  <h2>
    <i class="fa fa-university">BANK/ ASSURANCE</i>&nbsp<i class="fa fa-university"></i>
  </h2>
  <p>vevevhuevhevevejvbeivevhevhueviei</p>
</div>

Balise <i>

Utilise <span> au lieu de <i> : https://blog.lesieur.name/icon-ou-la-balise-html-semantique-qui-n-existait-pas/

<span class="fa fa-university">BANK/ ASSURANCE</span>&nbsp<span class="fa fa-university"></span>

Casse

Par convention les noms de classes et d’id utilise la kebab-case, ex. je-suis-un-id

id="bouton"
id="button-2" <!-- ou id="button2" // pas de majuscule -->

Hors mis ça, ton nommage n’est pas assez pertinent. Il vaut mieux appeler un bouton button-bank plutôt que button-2

JavaScript

Point virgule, semi-colon.

Les expressions JavaScript se terminent par un semi-colon quand elles sont toutes sur la même ligne. Par convention, quand elles sont sur plusieurs lignes, on conseil tout de même de les mettres pour « apprendre » à bien différentier les expressions.

document.querySelector("#bouton").onclick = function() {
...
}; // <-- point virgule à la fin de cette « expression d'affectation à gauche ».

Indentation

On indente chaque contenu de bloc pour la relecture :

document.querySelector("#bouton").onclick = function() {
  if (window.getComputedStyle(document.querySelector('#activation-auto')).display=='none'){
    document.querySelector("#activation-auto").style.display="block";
  } else {
    document.querySelector("#activation-auto").style.display="none";
  }
};

Aération

On place des espaces entre les différents éléments de syntaxe

  if (window.getComputedStyle(document.querySelector('#activation-auto')).display == 'none') {
    document.querySelector("#activation-auto").style.display = "block";

Références

On rassemble les références au DOM derrière des variables.

var bouton1 = document.querySelector("#bouton"),
	activationAuto = document.querySelector("#activation-auto");

bouton1.onclick = function() {
  if (window.getComputedStyle(activationAuto).display == 'none'){
    activationAuto.style.display = "block";
  } else {
    activationAuto.style.display = "none";
  }
};

Égalité stricte

On vérifie la valeur et le type de la valeur ===

  if (window.getComputedStyle(activationAuto).display === 'none') {

Bloc conditionnel vs Expression conditionnelle

Tu fais deux fois la même chose à la suite, en gros dans ce pend de code

// Tout le code de ICI...
document.querySelector("#Bouton3").onclick = function() {
  if (window.getComputedStyle(document.querySelector('#act-crypto')).display=='none'){
    document.querySelector("#act-crypto").style.display="block";
  } else {
    document.querySelector("#act-crypto").style.display="none";
  }
};
// ... à LÀ est inutile

// Puisque tu remplaces la valeur de `document.querySelector("#Bouton3")` ure seconde fois
// dans ton code, ce ne sont que ces parties qui sont réellement prisent en compte.
document.querySelector("#Bouton3").onclick = function() {
  document.querySelector("#act-crypto").style.display = (window.getComputedStyle(document.querySelector('#act-crypto')).display=='none') ? "block" : "none";
};

Ne mélange pas les deux approches dans un même type de contrôle, c’est extrêmement difficile à appréhender à la relecture. Les deux structures suivante produiront le même résultat.

Ça c’est un Bloc conditionnel

  if (window.getComputedStyle(activationAuto).display === 'none') {
    activationAuto.style.display = "block";
  } else {
    activationAuto.style.display = "none";
  }

Ça c’est une Expression conditionnelle

  activationAuto.style.display = (window.getComputedStyle(activationAuto).display === 'none') ? "block" : "none";

Soit tu utilises l’opérateur ternaire d’expression a ? b : c, soit tu utilise le bloc conditionnel de contrôle de flux if (a) { b } else { c }. Le choix de l’un ou de l’autre peut se faire ainsi :

Mes équipes sont débutantes en JS ?
  OUI -> `Bloc conditionnel`
  NON -> Dans la condition, je n'ai qu'une seule expression à effectuer ?
    OUI -> `Expression conditionnelle` possible
    NON -> `Bloc conditionnel`

Propriété on* VS propriété addEventListener

Utilise toujours addEventListener, dans ton code. onclick = a est la même chose que <a ... onclick="a">.... Le problème ici c’est que tu bloques l’action du clique sur cet élément pour tous les autres développeurs car il ne peux y avoir que « une source d’alimentation pour onclick ». Plus tard si quelqu’un ré-affecte cette valeur, il détruira ton action à toi.

Il faut donc créer toi même des « écouteur d’évènement » (Event Listener)

var bouton1 = document.querySelector("#bouton"),
	activationAuto = document.querySelector("#activation-auto");

bouton1.addEventListener("click", function() { // <-- on utilise des écouteurs d'évènement pour « empiler » les comportements au clique plutôt que de les écrasers
  if (window.getComputedStyle(activationAuto).display == 'none'){
    activationAuto.style.display = "block";
  } else {
    activationAuto.style.display = "none";
  }
});

Solution

Tu trouverras un code fonctionnel pour tes trois premiers liens dans le codepen :

En voici le détail.

// Tu indiques au relecteur ou à toi même, avec quoi tu vas travailler
var boutonAuto = document.querySelector("#Bouton"),
    boutonBank = document.querySelector("#Bouton1"),
    boutonCom = document.querySelector("#Bouton2"),
    activationAuto = document.querySelector('#activation-auto'),
    activationBank = document.querySelector('#act-bank'),
    activationCom = document.querySelector('#act-com');

// Tu crées une fonction pour fermer tous les affichages
function unactivation() {
  activationAuto.style.display = "none";
  activationBank.style.display = "none";
  activationCom.style.display = "none";
}

// Puis tu crées tes écouteurs d'évènement pour ouvrir chaque section.

    //              AUTO

// Donc on cliquant sur ce bouton
boutonAuto.addEventListener("click", function() {
  // Tu vas fermer tout ce qui était déjà ouvert
  unactivation();
  // Puis ouvrir uniquement cette section
  activationAuto.style.display = "block";
});

    //              BANK
boutonBank.addEventListener("click", function() {
  unactivation();
  activationBank.style.display = "block";
});

    //              COMMERCE
boutonCom.addEventListener("click", function() {
  unactivation();
  activationCom.style.display = "block";
});

Je te laisse faire la suite.

Mon ressenti

Tu ne semble pas maîtriser ce que tu manipules, même sans parler de bonne pratique. Il me semble que c’est un problème de compréhension fondamentale des mécanismes du JavaScript et de son API DOM.

On sent bien que tu as accrochés des morceaux à droite à gauche comme tu pouvais.

Si tu as le temps, bosse tes fondamentaux : il y a des sites comme https://www.javascript.com/ pour apprendre convenablement le JavaScript.

J’ai des offres d’aide à l’apprentissage de bonne pratique et d’utilisation du JavaScript / HTML / CSS. Je peux aussi faire de la relecture de code. si tu es intéressé MP moi.

Bon courage !

1 « J'aime »

Merci pour tout c’est beau conseils, ça m’a aidé et mis sur le droit et bon chemin du savoir. :)

Human Coders - Le centre de formation recommandé par les développeur·se·s pour les développeur·se·s