On clicking on a specific child a different jQuery should run

Question

I developed a UI where you will click a card it will pop up but inside that card there are two links on which when I click it should not pop back. I know that those links are part of that card and I put an event on the card selector.

So I want to achieve this scenario:

When user clicks on a card no matter where ... it should pops up.. (Its doing it right now) but when user clicks on those two links it should not pop back ... it should show tabs which I will handle myself ... Just need a way that it should not pop back on clicking on those links because I want to fire another event to display tabs on those links.

I tried it with :not but it didn't work for me.

var card = $('.card');

card.click(function() {
  if ($(this).hasClass('gravitate')) {
    $(this).removeClass('gravitate');
    $(this).addClass('levitate');
  } else {
    $(this).addClass('gravitate');
    $(this).removeClass('levitate');
  }

});

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 30px;
}

.card {
  border: #ececec 1px solid;
  padding: 10px;
  width: 200px;
  margin-bottom: 10px;
}

.tab-pane {
  display: none;
}

.transition {
  transition: all 500ms
}

.gravitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
  width: 200px;
  transform: translate(0, 0);
}

.levitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
  width: 220px;
  transform: translate(-10px, 5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane first-name">Omer</div>
  <div class="tab-pane last-name">Hussain</div>
</div>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane first-name">Usman</div>
  <div class="tab-pane last-name">Ali</div>
</div>

Answer 1

You can add an event handler to your links to check if the parent card has the levitate class and if so, stop the click event from bubbling up the DOM and triggering your other event handler:

$('a.tab').click(function(e) {
  if ($(this).parent().hasClass('levitate')) {
    e.stopPropagation();
  }
})

var card = $('.card');

card.click(function() {
  if ($(this).hasClass('gravitate')) {
    $(this).removeClass('gravitate');
    $(this).addClass('levitate');
  } else {
    $(this).addClass('gravitate');
    $(this).removeClass('levitate');
  }

});

$('a.tab').click(function(e) {
  if ($(this).parent().hasClass('levitate')) {
    e.stopPropagation();
  }
})

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 30px;
}

.card {
  border: #ececec 1px solid;
  padding: 10px;
  width: 200px;
  margin-bottom: 10px;
}

.tab-pane {
  display: none;
}

.transition {
  transition: all 500ms
}

.gravitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
  width: 200px;
  transform: translate(0, 0);
}

.levitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
  width: 220px;
  transform: translate(-10px, 5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane" class="first-name">Omer</div>
  <div class="tab-pane" class="last-name">Hussain</div>
</div>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane" class="first-name">Usman</div>
  <div class="tab-pane" class="last-name">Ali</div>
</div>