jQuery toggle moves the bottom element - html

Question

I have boxes with some content but not all text is displayed. On click I toggle all the text but the problem is I don't want the bottom element to move, instead I want the toggled div to be on top of the bottom element. Would anyone help with ideas how to do this? Thank you.
Ps. Also, for some reason the transition/animation doesn't work.
Here is a link to codepen: https://codepen.io/christmastrex/pen/gOwGvap and here is my code:
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">“It’s not about weight it’s about how<br> your body changes”</p>
</div>
<div class="card__toggle">
<p>Doing resistance training and cardio combined and I have not lost one single ounce on the scale….I was feeling horribly frustrated being it has been a month so I decided to do a progress sequence and wth look at me now!! It’s not about weight, it’s about how your body changes when you eat right and exercise! Yay!!”</p>
</div>
</div>
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">“It’s not about weight it’s about how<br> your body changes”</p>
</div>
<div class="card__toggle">
<p>Doing resistance training and cardio combined and I have not lost one single ounce on the scale….I was feeling horribly frustrated being it has been a month so I decided to do a progress sequence and wth look at me now!! It’s not about weight, it’s about how your body changes when you eat right and exercise! Yay!!”</p>
</div>
</div>
------------------------------------------------------------
.card {
background-color: #fff;
max-width: 490px;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74,74,74,.3);
&__toggle {
overflow: hidden;
max-height: 55px;
p {
font-size: 16px;
margin-bottom: 10px;
}
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after{
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all .3s ease-in-out;
}
}
&.active {
.card__toggle {
max-height: 700px;
transition: all .3s ease-in-out;
}
.card__header {
&::after {
background-color: #fff;
color: red;
transform: rotate(180deg);
}
}
}
}
-----------------------------------------------------
$(document).ready(function() {
$(".js-toggle").on("click", function () {
$(".card__header.active").not($(this)).removeClass("active").next(".js-card-toggle").slideUp("slow");
$(this).toggleClass("active").next(".js-card-toggle").slideToggle("slow");
$(this).closest(".card").toggleClass("active").siblings().removeClass("active");
});
});```

Answer 1

I think you are trying to achieve this, copy it and see if it works.
HTML:
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">
“It’s not about weight it’s about how<br />
your body changes”
</p>
</div>
<div class="card__toggle">
<p>
Doing resistance training and cardio combined and I have not lost one
single ounce on the scale….I was feeling horribly frustrated being it has
been a month so I decided to do a progress sequence and wth look at me
now!! It’s not about weight, it’s about how your body changes when you eat
right and exercise! Yay!!”
</p>
</div>
</div>
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">
“It’s not about weight it’s about how<br />
your body changes”
</p>
</div>
<div class="card__toggle">
Doing resistance training and cardio combined and I have not lost one single
ounce on the scale….I was feeling horribly frustrated being it has been a
month so I decided to do a progress sequence and wth look at me now!! It’s
not about weight, it’s about how your body changes when you eat right and
exercise! Yay!!”
</div>
</div>
SCSS:
.
card {
max-height: 125px;
overflow: hidden;
background-color: #fff;
max-width: 490px;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
position: relative;
height: 150px;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74, 74, 74, 0.3);
transition: 0.4s ease;
&.active {
max-height: 210px;
}
&__toggle {
background-color: white;
p {
font-size: 16px;
margin-bottom: 10px;
}
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
}
&.active {
.card__toggle {
transition: all 0.3s ease-in-out;
width: 100%;
z-index: 1;
background-color: white;
}
.card__header {
&::after {
background-color: #fff;
color: red;
transform: rotate(180deg);
}
}
}
}
jQuery:
$(".js-toggle").click(function () {
console.log($(this).parents(".card"));
$(this).parents(".card").toggleClass("active");
});

Answer 2

I managed to do find a solution after all.. I made changes to the css only
background-color: #fff;
max-width: 490px;
padding: 20px;
margin: 0 auto 70px auto;
border-radius: 5px;
position: relative;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74, 74, 74, 0.3);
&::after {
content: "";
position: absolute;
height: 20px;
background-color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
bottom: -40px;
left: 0;
z-index: 10;
width: 100%;
box-shadow: 0 10px 20px -7px rgba(74, 74, 74, 0.3);
transition: all 0.3s ease-in-out;
transition-delay: 0.5s;
}
&__toggle {
overflow: hidden;
max-height: 45px;
position: absolute;
z-index: 1;
background-color: #fff;
margin-left: -20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 5px;
box-shadow: 0 10px 15px -12px rgba(74, 74, 74, 0.3);
transition: all 1s ease-in-out;
p {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.3;
}
&-s {
max-height: 18px;
}
}
&--s {
max-width: 350px;
}
&__img {
border: 5px solid #d54f80;
border-radius: 5px;
padding: 5px 5px 1px 5px;
margin-bottom: 20px;
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
}
&.active {
&.card::after {
background-color: transparent;
transition: all 0s ease-in-out;
}
.card__toggle {
max-height: 700px;
}
.card__header {
&::after {
background-color: #fff;
color: pink;
transform: rotate(180deg);
}
}
}
}