JavaScript - one image, two actions

I am looking for JavaScript command that would do the following:

Click on image -> open spoiler

Click on image again -> hide spoiler

Here is what I have so far:

JavaScript in my html

<script>
function myFunction() {
document.getElementById("prvy").innerHTML = document.getElementById('spoiler_id').style.display='';}
</script>

Spoiler

<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" 
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none'; 
document.getElementById('show_id').style.display='';" 
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>

And my button:

<div id="prvy" onclick="myFunction()"></div>

What I managed to do, is to click on a image, which will open spoiler. However, I've been unable to do the second part, onclick again it will close the spoiler.

I also did search for solution already, nothing worked for me, not even this: Link

I also tired if{} else{} statement but that didn't work for me either.

Help would be really appreciated, as I am getting desperate on this one.

Solution

You can use jQuery .toggle() to toggle show/hide

$("#prvy").click(function() {
    $("#spoiler_id").toggle();
});

Note : You need to include jQuery in your document as

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Working snippet :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" 
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none'; 
document.getElementById('show_id').style.display='';" 
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>


<div id="prvy" onclick="myFunction()">button</div>

<script>
  $("#prvy").click(function() {
    $("#spoiler_id").toggle();
  });
</script>