Need some help with spoiler button javascript

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>`

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer