Il y a plusieurs boutons sur la page. Lorsque vous cliquez dessus, tous les boutons se déclenchent.

Faire un seul bouton, qui est dans celui qui a été cliqué et dans le même div avec le

"Détails", déclenchement au clic.

Mêmes boutons sur la page :


jQuery(function($) {
  $(document).ready(function() {
    $('#bttn > button').click(function() {
      $('.details').toggle("fast");

    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttn" style="text-align: center;"><button class="orange-button">Show details</button></div>`

<div>
  <p class="details" id="abc" style="text-align: center;color:grey;padding:1em;background-color:white;margin:5px;display:none;">info@thithi.com</p>
</div>
0
AskorAsk 6 sept. 2020 à 10:08

1 réponse

Meilleure réponse

Pour cette structure html, il faut naviguer comme ceci et trouver le .details correspondant :

jQuery(function($) {
  $(document).ready(function() {
    $('#bttn > button').click(function() {
      // Changed Code
      $(this).parent().next().find('.details').toggle("fast");
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttn" style="text-align: center;"><button class="orange-button">Show details</button></div>`

<div>
  <p class="details" id="abc" style="text-align: center;color:grey;padding:1em;background-color:white;margin:5px;display:none;">info@thithi.com</p>
</div>
0
AbbasEbadian 6 sept. 2020 à 07:45