Adding classes to a parent div on click - html

Question

I have a setup that works similarly to an accordion, but vertical. I would like the add the class "unset" to the "choice" class, also while removing the "expand" and "small" classes.
I've edited the jQuery code to include to say when the card-close class is clicked, choice removes expand and adds class unset, and also if card-close is clicked, choice removes small and adds class unset.
Nothing I have used though has worked and I'm thinking it's because the div is inside the "choice" section.
Any ideas on how to get this to work?
jQuery(document).ready(function() {
jQuery(".card-close").on("click", function() {
jQuery(".choice").removeClass("expand");
jQuery(".choice").addClass("unset");
jQuery(".choice").removeClass("small");
jQuery(".choice").addClass("unset");
});
jQuery(".choice").on("click", function() {
jQuery(".choice").removeClass("expand unset ");
jQuery(".choice").addClass("small");
jQuery(this).removeClass("small");
jQuery(this).addClass("expand");
});
})
.container {
display: flex;
width: 100%;
padding: 0;
}
.choice {
height: 40vw;
box-sizing: border-box;
padding: 0;
overflow: hidden;
float: left;
align-items: center;
transition: width 0.2s;
position: relative;
}
.card-body {
z-index: 9;
}
.card-body h4 {
text-align: center;
font-family: 'Poppins', sans-serif !important;
color: #fff;
font-weight: 700;
opacity: .7;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 3px;
width: max-content;
}
.card-body .card-title {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
}
.expand .card-body .card-title {
left: 56%;
top: 40%;
}
.card-body .card-title .card-open,
.card-body .card-title .card-close {
color: #000;
background-color: #CBE3A9;
width: max-content;
padding: 0 7px;
font-size: 20px;
margin: 0 auto;
}
.card-body .card-title .card-close,
.expand .card-body .card-title .card-open {
display: none;
}
.expand .card-body .card-title .card-close,
.card-body .card-title .card-open {
display: block;
}
.choice .bg-image {
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
filter: blur(6px);
transition: 1s;
z-index: -9;
}
.danger-color .bg-image {
background-color: green;
}
.warning-color .bg-image {
background-color: blue;
}
.success-color .bg-image {
background-color: red;
}
.info-color .bg-image {
background-color: yellow;
}
.choice.expand .bg-image {
filter: blur(0px);
transition: 1s;
z-index: -999;
}
.expand .card-text {
width: 32%;
background-color: #A7D16D;
padding: 2%;
margin: 0 auto;
position: absolute;
left: 57%;
top: 51.9%;
}
.expand .card-body h4 {
opacity: 1;
font-size: 65px;
}
.small .card-body h4 {
font-size: 25px;
}
.expand {
width: 130%;
}
.unset {
width: 25%;
cursor: pointer;
}
.small .card-title h4 {
display: none;
}
.small {
width: 5%;
cursor: pointer;
background-color: #0000006e;
}
.small>.card-body .card-text {
opacity: 0;
}
.unset>div>p {
opacity: 0;
}
.expand>div {
transition-delay: 200ms;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container mt-5 justify-content-center">
<div class="choice unset mx-2 danger-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Strategic</h4>
<p class="card-open">+</p>
<p class="card-close">-</p>
</div>
<!-- Text -->
<p class="card-text">Every FeltonBuford Partners’ insight strategist has worked on the client side. As former leaders of businesses, we can understand the problems our clients face and deliver the level of strategic thinking that leads to true business breakthroughs.</p>
</div>
</div>
<div class="choice unset mx-2 warning-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Experience</h4>
<p class="card-open">+</p>
<p class="card-close">-</p>
</div>
<!-- Text -->
<p class="card-text">For more than two decades, FeltonBuford Partners has been providing powerful insights that lead to transformational growth for our clients. From the beginning, our goal has been to be the kind of research firm we would have wanted to hire when we
were on the client side.</p>
</div>
</div>
<div class="choice unset mx-2 success-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Fearless</h4>
<p class="card-open">+</p>
<p class="card-close">-</p>
</div>
<!-- Text -->
<p class="card-text">We have earned the reputation for being fearless. Because of our depth of experience, we have the confidence to tackle the toughest and most complex projects across the globe.</p>
</div>
</div>
<div class="choice unset mx-2 info-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Diverse</h4>
<p class="card-open">+</p>
<p class="card-close">-</p>
</div>
<!-- Text -->
<p class="card-text">Our diversity is a true strength. As a minority and women-owned company, we have a unique appreciation of the diversity of the human experience. We can apply our varied talents and perspectives to a broader and more relevant understanding of the
complex world in which we live.</p>
</div>
</div>
</div>

Answer 1

Or you can use stopPropagation in the close event, the event will be stopped before triggering open e.g
jQuery(".card-close").on("click", function(event) {
event.stopPropagation();
jQuery(".choice").removeClass("expand");
jQuery(".choice").addClass("unset");
jQuery(".choice").removeClass("small");
jQuery(".choice").addClass("unset");
});
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Answer 2

Use relative addressing
Something like this - run in full screen
$(document).ready(function() {
$(".card-toggle").on("click", function() {
const $parent = $(this).closest(".choice")
$parent.toggleClass("expand");
$parent.toggleClass("unset");
$parent.toggleClass("small");
$parent.toggleClass("unset");
$(this).text($parent.hasClass("expand") ? "+" : "-")
});
})
.container {
display: flex;
width: 100%;
padding: 0;
}
.choice {
height: 40vw;
box-sizing: border-box;
padding: 0;
overflow: hidden;
float: left;
align-items: center;
transition: width 0.2s;
position: relative;
}
.card-body {
z-index: 9;
}
.card-body h4 {
text-align: center;
font-family: 'Poppins', sans-serif !important;
color: #fff;
font-weight: 700;
opacity: .7;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 3px;
width: max-content;
}
.card-body .card-title {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
}
.expand .card-body .card-title {
left: 56%;
top: 40%;
}
.card-body .card-title .card-open,
.card-body .card-title .card-close {
color: #000;
background-color: #CBE3A9;
width: max-content;
padding: 0 7px;
font-size: 20px;
margin: 0 auto;
}
.card-body .card-title .card-close,
.expand .card-body .card-title .card-open {
display: none;
}
.expand .card-body .card-title .card-close,
.card-body .card-title .card-open {
display: block;
}
.choice .bg-image {
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
filter: blur(6px);
transition: 1s;
z-index: -9;
}
.danger-color .bg-image {
background-color: green;
}
.warning-color .bg-image {
background-color: blue;
}
.success-color .bg-image {
background-color: red;
}
.info-color .bg-image {
background-color: yellow;
}
.choice.expand .bg-image {
filter: blur(0px);
transition: 1s;
z-index: -999;
}
.expand .card-text {
width: 32%;
background-color: #A7D16D;
padding: 2%;
margin: 0 auto;
position: absolute;
left: 57%;
top: 51.9%;
}
.expand .card-body h4 {
opacity: 1;
font-size: 65px;
}
.small .card-body h4 {
font-size: 25px;
}
.expand {
width: 130%;
}
.unset {
width: 25%;
cursor: pointer;
}
.small .card-title h4 {
display: none;
}
.small {
width: 5%;
cursor: pointer;
background-color: #0000006e;
}
.small>.card-body .card-text {
opacity: 0;
}
.unset>div>p {
opacity: 0;
}
.expand>div {
transition-delay: 200ms;
opacity: 1;
}
.card-toggle { font-size: xx-large }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container mt-5 justify-content-center">
<div class="choice unset mx-2 danger-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Strategic</h4>
<p class="card-toggle">-</p>
</div>
<!-- Text -->
<p class="card-text">Every FeltonBuford Partners’ insight strategist has worked on the client side. As former leaders of businesses, we can understand the problems our clients face and deliver the level of strategic thinking that leads to true business breakthroughs.</p>
</div>
</div>
<div class="choice unset mx-2 warning-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Experience</h4>
<p class="card-toggle">-</p>
</div>
<!-- Text -->
<p class="card-text">For more than two decades, FeltonBuford Partners has been providing powerful insights that lead to transformational growth for our clients. From the beginning, our goal has been to be the kind of research firm we would have wanted to hire when we
were on the client side.</p>
</div>
</div>
<div class="choice unset mx-2 success-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Fearless</h4>
<p class="card-toggle">-</p>
</div>
<!-- Text -->
<p class="card-text">We have earned the reputation for being fearless. Because of our depth of experience, we have the confidence to tackle the toughest and most complex projects across the globe.</p>
</div>
</div>
<div class="choice unset mx-2 info-color">
<div class="bg-image"></div>
<div class="card-body">
<!-- Title -->
<div class="card-title">
<h4>Diverse</h4>
<p class="card-toggle">-</p>
</div>
<!-- Text -->
<p class="card-text">Our diversity is a true strength. As a minority and women-owned company, we have a unique appreciation of the diversity of the human experience. We can apply our varied talents and perspectives to a broader and more relevant understanding of the
complex world in which we live.</p>
</div>
</div>
</div>