Question

I have the following code to toggle elements in a list when the parent div “.row” is clicked to show more content “.ExpandPane” however when links within that parent div “.row” is click they also activate the toggle function

Is there a way I could solve this I would like to be able to click anywhere in the parent div “.row” but allow the links within that parent div “.Row” to function as normal and not activating the toggle function.

Html

<div class="Row">
   <a class="acceptBtn"></a>
   <p>content.....</p>
   <div class="ExpandPane"></div> <!-- hidden -->
</div>
<div class="Row">
   <p>content...</p>
   <a class="acceptBtn"></a>
   <div class="ExpandPane"></div><!-- hidden -->
</div>
<div class="Row">
    <p>content....</p>
    <a class="acceptBtn"></a>
   <div class="ExpandPane"></div><!-- hidden -->

</div>

JQuery

 $(".Row").toggle(
      function () {
        $(this).find('.ExpandPane').show();
        //$(this).find('.PhotoShow').hide();
        //$(this).find('.PhotoHide').show();

      },
      function () {
        $(this).find('.ExpandPane').hide();
        //$(this).find('.PhotoHide').hide();
        //$(this).find('.PhotoShow').show();
      });


$(".acceptBtn").click(function(event) {
  alert("hi");
});

Answer 1

$(".acceptBtn").click(function(event) {
  alert("hi");
  event.stopPropagation();
});

stopPropagation() prevents the event from bubbling up to your parent divs. Also, this question has been answered about 100 times on SO.