Javascript solution to showing spoiler

Javascript solution to showing spoiler

Sometimes, you might find yourself needing to hide content that are spoilers manually. This is especially so when you don’t wish for your site to be bloated by libraries or plugins. This is a quick solution to solve that, although i admit it is not the most elegant.

It does not require jQuery or any other library. It only makes use of simple css and javascript.

<style>
.hidespoiler{
    display:none;
}
.showspoiler {
    display:block;
}
</style>

<span onclick="toggleSpoiler(this);">Toggle Spoiler<span class="hidespoiler">Spoiler Content</span></span>
<script>
function toggleSpoiler(spoilerElement) {
    spoilerElement = spoilerElement.children[0];
    spoilerElement.toggleClass('showspoiler');
    spoilerElement.toggleClass('hidespoiler');
}
</script>