ARTICLE AD BOX
I'm using code that hides content and reveals a button when the page is scrolled down 50px. Clicking the button reveals the same content, and clicking it again hides it.
Here's a demo of my code: Jsfiddle
You can see that when you hide the content and move the button up, the block height doesn't change. How can I dynamically change the block height when the button is moved?
If I need to change the button up/down movement method along with dynamically changing the block height, could you suggest a more correct solution?
P.S. The line <div style="height: 500px;"></div> in my html code is for demo purposes only. This line won't appear in the production code, so you can ignore it.
document.addEventListener('DOMContentLoaded', function () {
const contentBlock = document.querySelector('.content');
const toggleButton = document.querySelector('.toggle-button');
// Click handler for a button to toggle visibility
function toggleVisibility() {
if (contentBlock.classList.contains('hidden-content')) {
contentBlock.classList.remove('hidden-content');
contentBlock.classList.add('show-content');
toggleButton.textContent = 'Hide'; // Content is now shown
updateToggleButtonState(true); // Show the button
} else {
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
toggleButton.textContent = 'Show'; // Content is now hidden
updateToggleButtonState(false); // Hiding the button
}
}
// Switching button states when block visibility changes
function updateToggleButtonState(show) {
if (show) {
toggleButton.classList.add('slide-down');
setTimeout(() => {
toggleButton.classList.remove('slide-up');
}, 0);
} else {
toggleButton.classList.add('slide-up');
setTimeout(() => {
toggleButton.classList.remove('slide-down');
}, 0);
}
}
// Handling the page scroll event
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
toggleButton.style.display = 'block';
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
toggleButton.textContent = 'Show'; // Content is hidden
updateToggleButtonState(false); // The button should move up.
} else {
toggleButton.style.display = 'none';
contentBlock.classList.remove('hidden-content');
contentBlock.classList.add('show-content');
toggleButton.textContent = 'Hide'; // Content is shown
updateToggleButtonState(true); // The button should move down
}
});
// Registering a button click event
toggleButton.addEventListener('click', () => {
toggleVisibility();
});
});
.sticky-category {
position: sticky;
top: 20px;
height: auto;
z-index: 999;
background-color: #ccc;
transition: all .2s ease-in-out;
}
.content {
transition: opacity 0.5s ease-in-out;
}
.toggle-button {
display: none;
max-width: 200px;
margin: 0 auto;
padding: 10px;
background-color: rgb(191,79,203);
border-radius: 50px;
border: none;
cursor: pointer;
color: #fff;
}
.toggle-button:hover {
background-color: rgb(143,62,184);
}
.hidden-content {
opacity: 0;
visibility: hidden;
}
.show-content {
opacity: 1;
visibility: visible;
}
.toggle-button.slide-up {
transform: translateY(-70px);
}
.toggle-button.slide-down {
transform: translateY(0);
}
<div class="sticky-category">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in felis in felis placerat pulvinar. Sed eget fermentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque placerat condimentum laoreet. Mauris facilisis mi tellus, a blandit magna viverra in. Aenean varius pretium elit vitae finibus. Fusce vel cursus tellus, non sollicitudin mi.</div>
<button class="toggle-button">Show</button>
</div>
<div style="height: 500px;"></div>
1551 gold badge12 silver badges41 bronze badges
5
