javascriptjqueryhtmlimage

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>