mobile logo

jQuery click action to toggle but prevent toggle while clicking link in div

Solution:

You want to use stopPropagation on the event that is triggered when you click the Link within your span. That prevents the event from bubbling up to parent DOM Elements in your HTML structure.

 

$('.clickable').on('click', function() {
  $(this).find('span').toggleClass('hidden');
})

// Add stopPropagation() to the a Link within the span
$('.clickable > span > a').on('click', function( e ) {
    e.stopPropagation();
})
.hidden {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickable">
  Click me
  <span class="hidden">NOT SEEN <a href="#">Link</a></span>
</div>