[Résolu] Onclick sur plusieurs Div mais plusieurs click

Salut à tous,
Je vous remercie d'avance de m'aider sur ce sujet qui me rend littéralement fou. J'ai eu beau chercher je ne trouve pas de réponse à cette question.
J'ai réussi à rendre un lien cliquable pour afficher une div. Mais comme j'ai plusieurs lien et plusieurs div à afficher individuellement à chaque clic, je me retrouve obligé de scripter une fonction par div. N'y a t'il pas un moyen de faire une fonction globale?? En fait j'imagine que si mais mes compétences en javascript sont limitées ????
Encore merci pour vos réponses

<a class="question" onclick="MyFunction()">Lien 1</a>
	<div class="reponse" id="reponse4">
		BlaBlaBla
	</div>

function myFunction() {
			  var x = document.getElementById("reponse1");
			  var y = document.getElementById("fleche1");
			  if (x.style.display === "block") {
				x.style.display = "none";
			  } else {
				x.style.display = "block";
			  }
			  
			  if (y.style.opacity === "0") {
				y.style.opacity = "1";
			  } else {
				y.style.opacity = "0";
			  }
			}

Essaye ça (:

  <a class="lien">LIEN 1</a>
  <div class="div"></div>

  <a class="lien">LIEN 2</a>
  <div class="div"></div>

  <a class="lien">LIEN 3</a>
  <div class="div"></div>

  .div {
  width: 100px;
  height: 100px;
  background: red;
  display: none;
}

      var lien = document.querySelectorAll('.lien');
      var div = document.querySelectorAll('.div');

    lien.forEach((element, index) => {
      element.addEventListener('click', function(){
        div[index].style.display = "block";
      });
    })

Modifié par vzytoi (19 Sep 2020 - 01:18)

Super c'est exactement ça en plus j'avais essayé queryselector mais je ne savais pas que l'on pouvais utiliser All ????

Merci beaucoup. Mais pourrais-je abuser et demander comment faire pour refermer les div au clic? Et éventuellement faire disparaitre des icônes de flèches lorsque l'on affiche le bloc. Mais bon ca c'est juste si j'oserais demander ????

Et encore une fois MERCI beaucoup

:3

  var lien = document.querySelectorAll('.lien');
  var div = document.querySelectorAll('.div');
  var fleche = document.querySelectorAll('.fleches');

  lien.forEach((element, index) => {
    element.addEventListener('click', function(){
      div[index].style.display = "block";
      fleche[index].style.display = "none";
    });
  })

  for(i = 0; i < div.length; i++) {
    div[i].addEventListener('click', function(){
      this.style.display = "none";
    });
  }

Le script reste tel quel. Il marche toujours mais le clic ne referme pas les blocs et les flèches ne disparaissent pas.
PS: je suis sur safari ca viens peut être de la? ????

Encore merci pour le temps

CubWolf a écrit :
Le script reste tel quel. Il marche toujours mais le clic ne referme pas les blocs et les flèches ne disparaissent pas.
PS: je suis sur safari ca viens peut être de la? ????

Encore merci pour le temps

Peut-être une histoire de cache, celui de safari est super chiant car on peut pas le vider facilement, essaye avec un autre navigateur. Pour le vider ce sera cmd+shift+R
Modifié par vzytoi (19 Sep 2020 - 01:45)

Non j'ai tout essayé... ):

voila mes codes (si jamais j'ai fait une erreur):

<a class="question">Titre? &nbsp;<i class="fas fa-caret-down fleche"></i></a>

<div class="reponse">
       Blablabla
</div>

<script>
		var lien = document.querySelectorAll('.question');
		var div = document.querySelectorAll('.reponse');
		var fleche = document.querySelectorAll('.fleche');

		lien.forEach((element, index) =>
		{
		element.addEventListener('click', function(){
		div[index].style.display = "block";
		fleche[index].style.display = "none";
		});
		})

  for(i = 0; i < div.length; i++) {
    div[i].addEventListener('click', function(){
      this.style.display = "none";
    });
  }
</script>

Sinon pas de prise de tête ca m'aide déjà beaucoup

https://codepen.io/vzytoi/pen/gOrBRWZ
Modifié par vzytoi (19 Sep 2020 - 02:03)

Ah ok un instant
Modifié par CubWolf (19 Sep 2020 - 02:03)

CubWolf a écrit :
Ah ok un instant

Je l'ai fait (:
J'ai modifié mon poste précédent

Sur codePen la fleche ca marche si je met du texte par exemple par contre le retour en display:none ca ne marche pas pour moi. Du coup ca viens de safari?

Si le résultat est différent sur codepen et sur safari alors le problème vient de safari, je te conseille vraiment d'utiliser google chrome

Non justement sur codepen ca ne marche pas non plus la fermeture du bloc.
Mais j'utilise quand même safari.

Envois moi le lien de ton codepen pour que je regarde

https://codepen.io/vincent-cottalorda/pen/XWdxgzR

J'avais pas comprit que quand tu parlais du retour tu parlais du retour de la flèche ...
Je l'avais simplement pas programmée (:
Le nouveau script :

var lien = document.querySelectorAll('.question');
var div = document.querySelectorAll('.reponse');
var fleche = document.querySelectorAll('.fleche');

lien.forEach((element, index) => {
  element.addEventListener('click', function(){
    div[index].style.display = "block";
    fleche[index].style.display = "none";
  });
  for(i = 0; i < div.length; i++) {
    div[i].addEventListener('click', function(){
      this.style.display = "none";
      fleche[index].style.display = "block";
    });
  }
})

Alors ce que je veux en fait c'est que lorsque je clique une seconde fois le block re-disparaisse, et la flèche réapparaisse. Car la pour moi ca ne fonctionne pas en tout cas.

NIIIIIIIICKEL
par contre la flèche ne disparais pas mais à vrai dire ce n'est pas très grave.

Merci Beaucouuuuuup
Modifié par CubWolf (19 Sep 2020 - 02:30)

Si dans ton code la flèche à bien la classe "fleche" alors ça devrait marcher ...
Bref je vais aller dormir sinon ça va être compliquer en cours demain.
Mais avant tout rappelle toi bien que c'est pas parce que vous nous avez battu au classico le 13 que vous êtes plus fort (:
Bonne nuit