So I have added a HTML button on my blog posts that hides an reveals spoiler text. Currently the spoiler text is hidden when you arrive on the blog post, and can be revealed when clicking the button. I want it the other way around, I want to have the spoiler text revealed when arriving on the page and then hide it when clicking the button… I just can’t seem to get the JS right… The JS is added to the footer with the Code Snippets plugin.
If there’s anyone that could help me out, its much appreciated! This is how I currently have it set up:
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
var toggleButton = document.getElementById(‘toggle-spoilers’);
var spoilers = document.querySelectorAll(‘.spoiler-text’);
var spoilersVisible = false;
toggleButton.addEventListener(‘click’, function() {
spoilersVisible = !spoilersVisible;
spoilers.forEach(function(spoiler) {
spoiler.classList.toggle(‘revealed’, spoilersVisible);
});
toggleButton.textContent = spoilersVisible ? ‘Hide Spoilers’ : ‘Show Spoilers’;
toggleButton.classList.toggle(‘showing-spoilers’, spoilersVisible);
});
});
</script>
The HTML button looks like this:
`<button id=”toggle-spoilers”>Show Spoilers</button>`
The spoiler text is marked as this:
`<span class=”spoiler-text”>Spoiler text here</span>`
[ad_2]