Измените текст на кнопке в зависимости от того, отображается или скрыт контент. ⇐ Html

[Anonymous]

Я использую код, который скрывает содержимое и отображает кнопку при прокрутке страницы на 50 пикселей вниз. Нажатие кнопки открывает тот же контент, а повторное нажатие скрывает его.
В этом коде кнопка имеет текст «Показать/Скрыть». Как сделать так, чтобы на кнопке было написано «Показать», когда контент скрыт, и «Скрыть», когда контент отображается?
P.S. Строка в моем html-коде предназначена только для демонстрационных целей. Эта строка не появится в рабочем коде, поэтому ее можно игнорировать.

Код: Выделить всё

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);
}

Код: Выделить всё

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.
Show/Hide

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-or-hidde