I am facing an issue with the code below:
document.addEventListener("DOMContentLoaded", function(event) {
// Select all the read more buttons and hidden contents
const readMoreButtons = document.querySelectorAll(".read-more");
const hiddenContents = document.querySelectorAll(".hidden");
// Now loop over the read more buttons
readMoreButtons.forEach((readMoreButton, index) => {
// Add onclick event listeners to all of them
readMoreButton.addEventListener("click", () => {
// Change content of read more button to read less based on the textContent
if (readMoreButton.textContent === "Read More") {
readMoreButton.textContent = "Read Less";
} else {
readMoreButton.textContent = "Read More";
}
// Toggle class based on index
hiddenContents[index].classList.toggle("hidden");
readMoreButton.closest(".snip1311").classList.toggle("reading");
})
})
})/* Projects */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}
figure.snip1311.reading {
overflow-y: auto;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-y: hidden;
overflow-x: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
border: 5px solid #555;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
height: 258px;
}
@media all and (max-width: 500px) {
figure.snip1311 img {
border: none;
}
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311 .read-more1 {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more1:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}<figure class="snip1311"><img src="https://www.thespruce.com/thmb/tClzdZVdo_baMV7YA_9HjggPk9k=/4169x2778/filters:fill(auto,1)/the-difference-between-trees-and-shrubs-3269804-hero-a4000090f0714f59a8ec6201ad250d90.jpg" alt="sample98"/>
<figcaption>
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet [...]<br />
</figcaption>
</figure>After running the code snippet above, I noticed that when clicking the read more button, it suddenly disappears due to the lengthy text pushing it upwards. How can I ensure that the read-more button remains at the top regardless of the text length?
Desired Output
https://i.sstatic.net/PU7ZJ.png
The main goal is to maintain the same margin between the read more button and the top of the card as shown in the desired output image. The alignment should stay unchanged, only ensuring that the button always appears with a consistent margin-top, irrespective of the text length. Any suggestions on achieving this result would be greatly appreciated.