Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible.
The behavior I'm aiming for is that if another grid item is clicked while one is already expanded, the previously expanded one should go back to normal and the newly clicked one should expand. Additionally, clicking on the close button should return the currently expanded grid item to its original state. I have managed to implement most of this functionality through JS by adding and removing classes using the classList function.
However, I seem to be facing an issue with the close button functionality. Despite not seeing the added class in the console log output (indicating it has been removed), the grid item does not revert to its normal state when the close button is clicked. This has left me puzzled and unsure about how to proceed.
Below is the snippet of my code:
document.addEventListener("DOMContentLoaded", function(e) {
const containers = document.querySelectorAll('.container');
let previouslyClickedContainer = '';
containers.forEach(container => {
const closeBtn = container.querySelector('.close-btn');
container.addEventListener('click', () => {
if (previouslyClickedContainer !== '') {
previouslyClickedContainer.classList.remove('enlarge');
}
container.classList.add('enlarge');
previouslyClickedContainer = container;
if (closeBtn.getAttribute('aria-pressed') === 'true') {
closeBtn.setAttribute('aria-pressed', 'false');
}
});
closeBtn.addEventListener('click', () => {
container.classList.remove('enlarge');
previouslyClickedContainer = '';
closeBtn.setAttribute('aria-pressed', 'true');
});
});
});.main-grid {
gap: 5rem;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-auto-rows: minmax(350px, 1fr);
}
.container {
position: relative;
z-index: 99;
width: 100%;
height: 100%;
cursor: pointer;
transition: all 600ms ease-in-out;
}
.container .close-btn {
position: absolute;
z-index: 101;
inset-inline-end: 0;
margin-block-start: 1.25rem;
margin-inline-end: .5rem;
opacity: 0;
transition: opacity 600ms ease-in-out;
}
.container img {
height: 100%;
}
/* class that is added and removed */
.enlarge {
z-index: 100;
width: 150%;
height: 150%;
box-shadow: 0px 0px 12px 0px hsl( var(--clr-dark) / .6);
}
.enlarge .close-btn {
opacity: 1;
}
.close-btn {
position: relative;
width: 32px;
transform: rotate(45deg);
}
.close-btn,
.close-btn::after {
height: 2px;
background-color: white;
}
.close-btn::after {
content: '';
position: absolute;
inset-inline: 0;
top: -.5rem;
transform: rotate(-90deg) translateX(-.5rem);
}<div class="main-grid">
<div class="container">
<div role="button" class="close-btn" aria-pressed="false" data-close-category-btn></div>
<img src="./assets/coffee-table.webp" alt="coffee table">
</div>
<div class="container">
<div role="button" class="close-btn" aria-pressed="false" data-close-category-btn></div>
<img src="./assets/coffee-table.webp" alt="coffee table">
</div>
<div class="container">
<div role="button" class="close-btn" aria-pressed="false" data-close-category-btn></div>
<img src="./assets/coffee-table.webp" alt="coffee table">
</div>
</div>