So with this code when I click on the card the card becomes selected. I would like only the button to be able to assign the active class. Thanks In advance, I'm still learning how to properly use Javascript!!
$(".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>Change the JS selector to point to the button and then the $(this) needs to look up to the parent element using .parent() to apply the active class to the card
Also added css to the button to make it easier to see!
$(".service-option-btn").click(function() {
$(this).parent().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;
}
.service-option-btn {
background-color: red;
padding: 5px;
}<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>