bonjour voici le code que j'utilise pour afficher/cacher un bloc html

function bar(){
	
	if(document.getElementById("links").style.display="block"){
		var value = document.getElementById("links").style.display="none";
	}else{
		var value = document.getElementById("links").style.display="block";
	}
}

cependant cela ne marche qu'une seule fois car après exécution,  le display fait disparaître le code html, comment faire pour que ça puisse marcher sans avoir à rafraîchir la page ? merci :) 

-
Edité par Anonyme 6 juillet 2018 à 17:32:08

-
Edité par LeKangouroo 6 juillet 2018 à 20:29:58

Bonjour,

Je te propose d'utiliser une classe qui permet de masquer un élement HTML.

.hide {
  display: none;
}

Lorsque tu cliqueras sur ton bouton, il te suffira de supprimer/ajouter la classe en fonction du contexte actuel.

function toggleHide() { element.classList.toggle('hide') }

var element = document.getElementById('element')

document.getElementById('button').addEventListener('click', toggleHide, false)

Ce script peut être amélioré. Notamment en utilisant des fonctions pures plutots que de générer des effets de bords. On pourrait utiliser également des Datasets pour industrialiser le fonctionnement de ce type de comportement.

Bonjour Anonyme,

Il y a un truc qui m’échappe,  tu peux nous fournir le code HTMl + Javascript, car ton code devrait fonctionner

Ps : le technique de Walter O'Brien qui consiste a utiliser une classe pour cacher est la meilleur solution pour cacher un élément

mais au final cela devrait revenir au même que ton script

Salut ! Regarde bien ta condition, il y a quelque chose qui ne va pas et qui explique pourquoi cela fonctionne qu'une seule fois, j'ai aéré pour que tu puisses mieux constater par toi-même

if ( document.getElementById("links").style.display = "block" )

-
Edité par LoKeD 11 juillet 2018 à 17:04:04

Selon moi, la meilleure solution consisterait à utiliser le JavaScript le moins de fois possible. C'est-à-dire, écrire une API qui fonctionne de manière générique et qui soit suffisament scalable. C'est-à-dire que si l'on ajoute 1 ou 100 bouton, on ne doit pas avoir à faire une tonne de code derrière. C'est pour cela que je conseillerais d'utiliser les Dataset.

<p id='paragraph'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus totam iste at sint! Maxime eum, veritatis, explicabo, ratione sapiente rem praesentium reprehenderit, inventore dignissimos harum velit aut modi laboriosam est.</p>

<button id='button' data-hide='paragraph'>Click me</button>

function toggleHide({ currentTarget: { dataset: { hide } } }) {
  document.getElementById(hide).classList.toggle('hide')
}

function onClick(callback) {
  return function (element) {
    element.addEventListener('click', callback)
  }
}

function foreach(selector) {
  return {
    do(callback) {
      document.querySelectorAll(selector).forEach(callback)   		 
    }
  }
}

foreach('[data-hide]').do(onClick(toggleHide))

Démo.

On peut bien sûr améliorer l'API pour permettre de masquer plusieurs éléments pour un bouton par exemple.

-
Edité par Walter O'Brien 12 juillet 2018 à 15:46:23