Question 37311 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Don't give active class when clicking the button – Jquery

So I have a page with a bunch or options listed in a card style view. Each card has a button at the bottom that will open a popup modal with more info about the service.

Now this page is also being used as a sort of build your own adventure, so when a visitor clicks the card it will get the active class and the active appearance along with that.

When a visitor clicks the read more modal button I don’t want the active class to be assigned to the card.

$(".service-option-card").click(function() {
  $(this).addClass("active").siblings('.active').removeClass('active');
});
.service-option-container {
  margin: 1em 0 4em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1em;
  row-gap: 1em;
}

.service-option-container .service-option-card {
  border: 1px solid black;
  border-radius: 20px;
  padding: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

.service-option-container .service-option-card .service-option-btn {
  margin: 1em 0;
}

.service-option-container .service-option-card .extra-pad-bottom {
  padding-bottom: 2em;
}

.service-option-container .service-option-card .option-price {
  font-weight: bold;
}

.service-option-container .service-option-card:hover {
  cursor: pointer;
}

.service-option-container .service-option-card.active {
  background-color: #efeeee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="service-option-container">
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
</div>

EDIT:

Solution found that worked for me, I have left it below as an answer.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solution I found, adding this if statement and returning true will end the function and prevent it from getting to the line that adds the active class to the card.

    $( ".service-option-card" ).click(function(e) {

    if($(e.target).is("a")){
        return true;
    }

    $( this ).addClass("active").siblings('.active').removeClass('active');

});

  2. 0

    If I get your question correctly, you wanted the card to be not active when user clicks on "Button"

    To achieve this, you can stop the propagation of event to .service-option-card which triggered the addition of active class

    $(".service-option-card").click(function() {
  $(this).addClass("active").siblings('.active').removeClass('active');
});

$(".service-option-btn").click(function(e) {
  e.stopPropagation();
});
    .service-option-container {
  margin: 1em 0 4em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1em;
  row-gap: 1em;
}

.service-option-container .service-option-card {
  border: 1px solid black;
  border-radius: 20px;
  padding: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

.service-option-container .service-option-card .service-option-btn {
  margin: 1em 0;
}

.service-option-container .service-option-card .extra-pad-bottom {
  padding-bottom: 2em;
}

.service-option-container .service-option-card .option-price {
  font-weight: bold;
}

.service-option-container .service-option-card:hover {
  cursor: pointer;
}

.service-option-container .service-option-card.active {
  background-color: #efeeee;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="service-option-container">
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
  <div class="service-option-card">Card Content goes in here <br><a class="service-option-btn">Button</a></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search