javascript - one image,two actions

Question

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 got 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, wich will open spoiler. Hovewer, I've been unable to do the second part, onclick again it will close the spoiler.

I also did serach for solution alredy, nothing worked for me, not even this: Link

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

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

You can use `$('#spoiler_id').toggle();` – Tushar Apr 02 '16 at 13:50 — Tushar, Apr 02 '16 at 13:50

score 0 · Answer 1 · answered Apr 02 '16 at 13:51

0

In the JavaScript where you click the button use the simple jQuery function toggle.

$('#spoiler_id').toggle();

Toggle will hide the element selected if it is currently shown or display the element if it is currently hidden.

answered Apr 02 '16 at 13:51

Wowsk

3,637
2
18
29

This may sound dull, but I never used jQuery before. Could you please write out the line where should I use it ? – Filip5 Apr 02 '16 at 13:57
Here, just make sure you include it before you use the that uses JavaScript: `` – Wowsk Apr 02 '16 at 14:00

score 0 · Answer 2 · answered Apr 02 '16 at 14:05

0

you would need some state that flips when the function is called.

like this.

<script>
var state = false;
function myFunction() {
  state = !state;
  if(state){
    //do something
  }else{
   //do something else
  }

}
</script>

answered Apr 02 '16 at 14:05

echopeak

251
1
2
9

score 0 · Accepted Answer · answered Apr 02 '16 at 14:09

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>

Well tired it, added jQuerry and script to header, spoiler to body, but its not working. Probably because my html is more complex and longer. Thank you for your help anyway. — Filip5, Apr 02 '16 at 14:33

score 0 · Answer 4 · answered Apr 02 '16 at 14:22

0

Is that all of your code, it would be easier for you and less confusing too if you just gave the buttons an on click function and then called that function in your js.

Can I see all of your html

answered Apr 02 '16 at 14:22

Alison1988

65
10

Okay what is your image called the one that you want to click on and is the spoiler - text? – Alison1988 Apr 02 '16 at 14:58
One of the answers did help me and is actually working. I marked that one with "accept sign". Thank you for helping me thou. – Filip5 Apr 02 '16 at 15:03

score 0 · Answer 5 · answered Apr 04 '16 at 05:09

I am giving an example to concerned question using javascript.

HTML:

<script type="text/javascript">
       var permit = 'true';
       function showhide() {
       var getcont = document.getElementsByClassName('hidshowcont');
                if (permit === 'true') {
                    permit = 'false';
                    getcont[0].style.display = 'block';
                }
                else {
                    permit = 'true';
                    getcont[0].style.display = 'none';
                }

            }
        </script>

<style type="text/css">
            .hidshowcont{
              height: 200px; 
              width: 300px; 
              border: 1px solid #333333; 
              display: none;
            }
        </style>

<a href="javascript:void(0)" onclick="showhide();"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" /></a>
        <br />
        <br />
        <div class="hidshowcont">
            This is an example of hide and show the container by clicking of an image.
        </div>

This will help u much

Sorry, the previous code is not running due some formalities of stackoverflow are not applied. now i am using jsfiddle. Try this url : https://jsfiddle.net/q0L3py32/6/ — AKSHAYA KUMAR Satapathy, Apr 14 '16 at 11:39

javascript - one image,two actions

5 Answers5