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 an exact demo of my code: Jsfiddle
In this code, the button has the text "Show/Hide." How can I make the button say "Show" when the content is hidden, and "Hide" when the content is shown?
P.S. The line <div style="height: 800px;"></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');
updateToggleButtonState(true); // Show the button
} else {
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
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');
updateToggleButtonState(false); // The button should move up.
} else {
toggleButton.style.display = 'none';
contentBlock.classList.remove('hidden-content');
contentBlock.classList.add('show-content');
updateToggleButtonState(true); // The button should move down
}
});
// Registering a button click event
toggleButton.addEventListener('click', () => {
toggleVisibility();
});
});
.sticky-category {
position: sticky;
top: 20px;
z-index: 999;
transition: all .2s ease-in-out;
background-color: #e5e5e5;
}
.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(-50px);
}
.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/Hide</button>
</div>
<div style="height: 800px;"></div>
1351 gold badge12 silver badges41 bronze badges
1
Okay here is what I did
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;
z-index: 999;
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>
In the toggleVisibility function I added toggleButton.textContent updates. In the scroll event handler added toggleButton.textContent updates. Also changed initial button text in HTML from "Show/Hide" to "Show"
Explore related questions
See similar questions with these tags.
