I have a div that has a click toggle action that when user clicks that div it will toggle the class of a span from hidden to visible. The problem is within that I have an href that triggers a popup modal, when you click that popup modal link it triggers the toggle action. I am looking for a suggestion to prevent toggle when clicking that link. Any help is much appreciated!
jQuery:
jQuery(".clickable-div").on( 'click', function() {
jQuery(this).find('span.hidden-desc').toggle();
});
inside ".clickable-div" there is an href with the following
<span id="popup-cont"><a id="popup-link" href="#popup">VIEW FULL LIST</a></span>
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>