Ändern Sie den Text auf der Schaltfläche, je nachdem, ob der Inhalt angezeigt oder ausgeblendet wird ⇐ HTML

[Anonymous]

Ich verwende Code, der Inhalte verbirgt und eine Schaltfläche anzeigt, wenn die Seite um 50 Pixel nach unten gescrollt wird. Wenn Sie auf die Schaltfläche klicken, wird derselbe Inhalt angezeigt, und wenn Sie erneut darauf klicken, wird er ausgeblendet.
Hier ist eine genaue Demo meines Codes: Jsfiddle
In diesem Code hat die Schaltfläche den Text „Anzeigen/Ausblenden“. Wie kann ich dafür sorgen, dass auf der Schaltfläche „Anzeigen“ angezeigt wird, wenn der Inhalt ausgeblendet ist, und „Ausblenden“, wenn der Inhalt angezeigt wird?
P.S. Die Zeile in meinem HTML-Code dient nur zu Demozwecken. Diese Zeile erscheint nicht im Produktionscode, Sie können sie also ignorieren.

Code: Select all

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

Code: Select all

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

Code: Select all

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