document.addEventListener("DOMContentLoaded", function() { const showButtons = document.querySelectorAll(".show-content-btn"); const hideButtons = document.querySelectorAll(".hide-content-btn"); const contentImages = document.querySelectorAll(".content"); hideButtons.forEach(hideButton => { hideButton.style.display = "none"; hideButton.style.opacity = "0"; // Initial opacity for fade-in effect }); contentImages.forEach(contentImage => { contentImage.style.display = "none"; contentImage.style.opacity = "0"; }); showButtons.forEach(showButton => { showButton.addEventListener("click", function() { const parent = this.parentNode; const contentImage = parent.querySelector(".content"); const hideButton = parent.querySelector(".hide-content-btn"); contentImage.style.display = "block"; contentImage.style.opacity = "1"; hideButton.style.display = "block"; hideButton.style.opacity = "1"; // Make the button fully visible showButton.style.display = "none"; }); }); hideButtons.forEach(hideButton => { hideButton.addEventListener("click", function() { const parent = this.parentNode; const contentImage = parent.querySelector(".content"); const showButton = parent.querySelector(".show-content-btn"); contentImage.style.opacity = "0"; hideButton.style.opacity = "0"; // Fade out the button setTimeout(function() { contentImage.style.display = "none"; hideButton.style.display = "none"; showButton.style.display = "block"; }, 300); }); }); });