We Keep Coding

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

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.

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>

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

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>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" />
<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

How to show a hidden div by javascript?

I want to hide a div if javascript is turned off and show that div if javascript enabled but I don't want to use <noscript> as in chrome and opera it has some issues. So what I am doing is something like this:
<div id="box" style="display:none"></div>
<script type="text/javascript">
document.getElementById("box").style.visibility = "visible";
</script>
But the javascript part does not show the div. How can I make it visible is javascript is enabled. Also tried $('#box').show(); but that too didn't work.

Use style.display
document.getElementById("box").style.display = "block";

You need to set the attribute display to block
document.getElementById("box").style.display = "block";
You are trying to toggle between visibility, which is similar, but a different property.

You are using display: none, not visibility: hidden.
Solution add visibility: hidden instead of display none if you want to use that instead of display. They work a little different.

You can set:
<div id='box' style='display: none;'>...</div>
And in your script code:
document.getElementById('box').style.display = 'block';

change display to visibility
<div id="box" style="visibility:none"></div>
<script type="text/javascript">
document.getElementById("box").style.visibility = "visible";
</script>
or change js
<div id="box" style="display:none"></div>
<script type="text/javascript">
document.getElementById("box").style.display = "block";
</script>

You could also use a mix of CSS and Javascript to accomplish this:
HTML/Javascript
<script type="text/javascript">
document.documentElement.className += 'js-ready';
</script>
CSS
div#box { display: none; }
.js-ready div#box { display: block !important; }

How to make a button visible by clicking another button?

How can I make the button save visible when I click the edit button? This is my code so far, but it happends nothing. I'm working in a jsp
<INPUT TYPE="BUTTON" VALUE="Edit" ONCLICK="btnEdit()" class="styled-button-2">
<INPUT TYPE="BUTTON" VALUE="Save" ONCLICK="btnSave()" class="styled-button-2" style="visibility:hidden;" id="save">
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementsById("save").style.visibility="visible";}
}
</script>

DEMO
It is considered bad practice to add onclick in your html, and you miss-spelled a method. You should equally avoid adding your css in your html as well.
HTML:
<INPUT TYPE="BUTTON" VALUE="Edit" class="styled-button-2" id="edit">
<INPUT TYPE="BUTTON" VALUE="Save" class="styled-button-2" id="save">
JS:
var edit = document.getElementById("edit");
var save = document.getElementById("save");
edit.onclick = function() {
save.style.visibility = "visible";
}
CSS:
#save {
visibility: "hidden";
}

Must be a long day.
You have a misspelling.
Not right
document.getElementsById
Right Way
document.getElementById

document.getElementById("save").style.visibility="visible";
use getElementById not getElementsById

Probably a simple error, but you wrote getElementsById not getElementById, which meant you were trying to get more than one element, when infact you only need to get the "save" button.
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementById("save").style.visibility="visible";}
}
</script>
Side note: You may want to tidy your code:
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
document.getElementById("save").style.visibility="visible";
}
</script>

Javascript Unhiding Element Onclick

I've been playing around with javascript and I am trying to get the below to work.
<script type="text/javascript">
function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display=block;
}
</script>
<a onClick="unhide('id1')"><span> Remove</span>
<span id="id1" hidden="true">Are You sure? | Yes / <a>No</a> </span>
On click, I am trying to make the hidden element get shown. I am unsure why it isn't working, the logic seems right to me.
Cheers

function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display="block";
}
block is undefined, "block" isn't

You are using hidden html5 property which has limited browser compatibility as of now. Try to hide it initially by using css property visibilty:hidden which you change via your function's onclick event.
function unhide(a) {
document.getElementById(a).style.visibility = "visible";
document.getElementById(a).style.display=block;
}
<a onClick="unhide('id1')"><span> Remove</span>
<span id="id1" style="visibility:hidden;">Are You sure? | Yes / <a>No</a> </span>

I hope this will help you out
<script type="text/javascript">
function unhide(a) {
document.getElementById(a).style.display = 'block';
}
</script>
Remove
<span id="id1" style="display: none;">Are You sure? | Yes / <a>No</a> </span>
Let me know.
Regards.

Only one point:
In <script> tag, all of words without quote is a reserved word or variable.So your code
document.getElementById(a).style.display=block;
Should be:
document.getElementById(a).style.display='block';
Becase block is a attribute of display, not the others.

You are using the hidden attribute.
So use this code instead:
function unhide(a){
document.getElementById(a).removeAttribute('hidden');
}

Try this:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
$("#id1").hide();
};
$("#unhide").click(function(){
$("#id1").show();
});
</script>
<a id="unhide"><span> Remove</span></a>
<span id="id1">Are You sure? | Yes / <a>No</a> </span>
I hope this help you, please leave a comment if it's worked or not.

Simple toggle div visibility with Javascript not working

This is very frustrating as it seems so simple yet is not working.
In my body I have
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<inputtype="button" value="Start" onClick="splash();" />
</div>`
And in my head, within script tags I have
function splash() {
var divSplash = document.getElementById("splashscreen");
divSplash.style.display = "none";
}
Surely when Start button is clicked, the splash() function should be called and the display of my splashscreen div be chanted to none?

The problem here is that the you write language="text/javascript", if you use instead language="javascript" it works.
I recommend you remove the language property and use type="text/javascript" instead. If you're using HTML5, you can omit the type property.
<script type="text/javascript">
function startGame() {
var divSplash = document.getElementById("splash");
divSplash.style.display = "none";
}
</script>
Also, the language property is now obsolete.

Using the exact code that you show here, I get the error 'divSplash is null.' This is to be expected -- your div is named "spashscreen" but your JS function is looking for a div named "splashscreen." (You're missing an 'l').
When I fix the typo, it works.

You're not using the same id :)
spashscreen != splashscreen

Here is the answer in a jsfiddle
HTML:
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<button onclick="splash()">Start</button>
</div>
Javascript:
function splash() {
var divSplash = document.getElementById('splashscreen');
divSplash.style.display = "none";
}