[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)

: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";
    });
  }

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)

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?

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)