I have two div in my html file. I want to hide the 1st div and show another div on html input button onclick event.
Here is my code,
function switchVisible() {
if (document.getElementById('Div1') !== undefined) {
if (document.getElementById('Div1').style.display == 'Block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'Block';
} else {
document.getElementById('Div1').style.display = 'Block';
document.getElementById('Div2').style.display = 'none';
}
}
}
#Div2 {
display: none;
}
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />
But it's not working. Any help will be appreciated.
Thanks.
1) Inside onclick, you don't have to use "javascript:", that is implied.
2) You check for "display: block", I always check for "display: none" (Because the display can also be "inline-block", etc.)
Try this:
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
#Div2 {
display: none;
}
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
As it is tagged with jQuery, here's the simple jQuery answer
$('body').on("click touchstart", "#Button1", function(e){
$("#Div1, #Div2").toggle();
});
use on to listen for the id #Button, I've used both click and touchstart to make it mobile friendly, and then used toggle() which sets the state of the display: to the opposite to what it is now. So if it was display:none, it becomes display:block, if it was display:block it becomes display:none
Try this:
var div1 = document.getElementById('Div1'),
div2 = document.getElementById('Div2');
function switchVisible() {
if(!div1) return;
if (getComputedStyle(div1).display == 'block') {
div1.style.display = 'none';
div2.style.display = 'block';
} else {
div1.style.display = 'block';
div2.style.display = 'none';
}
}
document.getElementById('Button1').addEventListener('click', switchVisible);
#Div2 {
display:none;
}
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click me" />
However, this approach may be better:
var wrapper = document.getElementById('wrapper');
function switchVisible() {
wrapper.classList.toggle('switched');
}
document.getElementById('Button1').addEventListener('click', switchVisible);
#wrapper > :last-child {
display: none;
}
#wrapper.switched > :last-child {
display: block;
}
#wrapper.switched > :first-child {
display: none;
}
<div id="wrapper">
<div>Div 1</div>
<div>Div 2</div>
</div>
<input id="Button1" type="button" value="Click me" />
you might wanna try this..
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
#Div1{
display: block;
background: blue;
}
#Div2 {
display: none;
background: red;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" />
<div id="Div1" class="divs"> </div>
<div id="Div2" class="divs"> </div>
Probably you have some syntax errors in your code. This one is working:
function switchVisible() {
if (document.getElementById('Div1') !== undefined) {
if (document.getElementById('Div1').style.display == 'block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
} else {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
}
}
#Div1 {
display:none;
}
#Div1 {
background: red;
}
#Div2 {
background: green;
}
#Div1, #Div2 {
width: 50px;
height:50px;
}
<div id="Div1"></div>
<div id="Div2"></div>
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />
Don't add the click event through html. Add an event listener like document.getElementById ("Button1").addEventListener ("click", switchVisible, false);
See working jsFiddle here: http://jsfiddle.net/bevanr01/gmkconLw/
Related
I'm using switch visible to switch between 3 visible elements on button press, but am only able to get 2. Thanks for the help :)
function switchVisible() {
if (document.getElementById('text1')) {
if (document.getElementById('text1').style.display == 'none') {
document.getElementById('text1').style.display = 'block';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'block';
}
else {
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'block';
document.getElementById('text3').style.display = 'none';
}
}
}
#text1, #text2, #text3 {
display: none;
}
<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
You can use the below approach to achieve this. Use a switch statment and a count vairable to keep track of 3 divs.
Full working code snippet:
let count = 1;
function switchVisible() {
switch (count) {
case 1:
document.getElementById('text1').style.display = 'block';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'none';
count++;
break;
case 2:
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'block';
document.getElementById('text3').style.display = 'none';
count++
break;
case 3:
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'block';
count = 1
break;
default:
count = 1
}
}
#text1,
#text2,
#text3 {
display: none;
}
<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();" />
Hope that's how you wanted it work.
to do this one proposal can be :
have an array of all div id to switch
have a rolling index that say which div should be displayed
var divIds = [
'text1',
'text2',
'text3'
];
var visibleIndex = 0;
function switchVisible() {
divIds.forEach(id => {
document.getElementById(id).style.display = 'none';
});
document.getElementById(divIds[visibleIndex]).style.display = 'block';
visibleIndex++;
if (visibleIndex === divIds.length) {
visibleIndex = 0;
}
}
switchVisible();
#text1, #text2, #text3 {
display: none;
}
<div id="text1">text 1</div>
<div id="text2">text 2</div>
<div id="text3">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
A class would be better to mark all elements of a collection.
Sidenote: In my experience classes are almost always better, as they can be applied to a single or to multiple elements.
IDs are imo. more for special cases. They address a single element which must be unique throughout the entire page.
Now back to topic:
About the toggling, you can either keep track of the visible element in a variable:
let visible = 0;
function switchVisible() {
const elements = Array.from(document.querySelectorAll(".tab"));
elements.forEach((element, index) => {
element.style.display = index === visible ? "block" : "none";
});
// increment visible
visible = (visible + 1) % elements.length;
}
.tab {
display: none;
}
<div class="tab">text 1</div>
<div class="tab">text 2</div>
<div class="tab">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();" />
or you find out which one is visible in the function itself.
function switchVisible() {
const elements = Array.from(document.querySelectorAll(".tab"));
// checking which one is the first that has some dimension
let visible = elements.findIndex(element => element.offsetWidth || element.offsetHeight);
// increment visible
visible = (visible + 1) % elements.length;
// make this "next one" visible
elements.forEach((element, index) => {
element.style.display = index === visible ? "block" : "none";
});
}
.tab {
display: none;
}
<div class="tab">text 1</div>
<div class="tab">text 2</div>
<div class="tab">text 3</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible()" />
I have two divs, one is hidden and the other one is visible. I'm using css display:none; to hide first and using style.display="block";
when I refresh the page it gives same div name in the address bar but the div is hidden.
I just want the div to stay block after refreshing or submitting the form inside the div
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#content {
flex:8;
display:flex;
flex-direction:row;
justify-content:space-between;
flex-basis:100%;
padding:0 10px 0x 10px;
text-align:center;
}
#leftnav {
flex:1;
padding-top:20px;
}
#midcontent {
flex:9;
text-align:center;
padding-top:20px;
display:block;
}
#leftnav ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#m1,#m2,#m3 {
flex:9;
text-align:center;
padding-top:20px;
display:none;
}
</style>
</head>
<body>
<div id="content">
<div id="leftnav" align="center">
<ul>
<li>Page m1</li>
<li>Page m2</li>
<li>Page m3</li>
</ul>
</div>
<div id="midcontent" align="center">
<p>Home Page</p>
</div>
<div id="m1" align="center">
<p>Div m1</p>
</div>
<div id="m2" align="center">
<p>Div m2</p>
</div>
<div id="m3" align="center">
<p>Div m3</p>
</div>
</div>
<script type="text/javascript">
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
var d2=document.getElementById('m2');
var d3=document.getElementById('m3');
function div1() {
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}
function div2() {
if(d.style.display === "block") {
d.style.display = "none";
d2.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
}
function div3() {
if(d.style.display === "block") {
d.style.display = "none";
d3.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
}
</script>
</body>
</html>
change:
function div1() {
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
}
}
to:
function toggleDiv() {
document.getElementById('midcontent').style.display = "none";
document.getElementById('m1').style.display = "block";
}
"i just want the div to stay block after refreshing" call the function on page load in html to make it execute after refresh of page:
<body onLoad="toggleDiv()">
<!-- Your html content -->
</body>
alternatively you can also do it in js:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
toggleDiv()
});
If you want more in depth persistance and/or variable changes please provide additional information on how and why you want to do this exactly! Hope it helps! :)
I'm very new to using Javascript and i'm struggling how I can achieve what I am after. I've created 4 buttons using;
<input type="button" name="answer" value="Brave" onclick="showDiv()">
My goal is that if you click on the button, it changes state and the div appears (got that far). If I click another button, i'd like the content to hide the previous div selected and show the one they had just clicked.
Any help/guidance would really be appreciated.
function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
}
function showDiv1() {
document.getElementById('DeterminedDiv').style.display = "block";
}
function showDiv2() {
document.getElementById('CompassionateDiv').style.display = "block";
}
function showDiv3() {
document.getElementById('ConsiderateDiv').style.display = "block";
}
My aim is that if you was to click
function showDiv()
{
document.getElementById('new1').style.display = "block";
document.getElementById('Div1').style.display = "none";
document.getElementById('Div2').style.display = "none";
}
function showDiv1()
{
document.getElementById('Div1').style.display = "block";
document.getElementById('new1').style.display = "none";
document.getElementById('Div2').style.display = "none";
}
function showDiv2()
{
document.getElementById('Div2').style.display = "block";
document.getElementById('new1').style.display = "none";
document.getElementById('Div1').style.display = "none";
}
Your code attached won't achieve any of the results you're looking for, however, it's obvious what you're looking for.
You buttons should look like the following :
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
Here, the role prevents the default behaviour of submit. The onclick tells the button what to do when you click it, and the "BraveDiv" is the parameter we will pass to the function, telling it which div to display.
The DIV associated with the above button, should look as follows :
<div id="BraveDiv" style="display: none;"> SOME CONTENT HERE </div>
Here you'll notice the ID is equal to the parameter we mentioned above.
And your JavaScript should work as follows :
<script>
function showDiv(elem){
document.getElementById(elem).style.display = "block";
}
</script>
I've attached a working snipped example as below, just click "Run code snippet" to view the snippet and test the code.
function showDiv(elem) {
document.getElementById(elem).style.display = "block";
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>
The above, however, will only SHOW YOUR DIVS.
The full jQuery solution to this (hide/show as per the tag) would be :
<script>
function showDiv(elem) { // When the button is pressed
$("div").each(function() { // For each Div
if ($(this).attr('id') != elem) { // If the Div's id is not equal to the parameter
$(this).css("display", "none");
} // HIDE IT
else {
$(this).css("display", "block"); // SHow It
});
</script>
If you are unfamiliar with jQuery and would prefer a JavaScript only solution, then :
<script>
function showDiv(elem){
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for(let i = 0; i < divsToCheck.length; i++){
if(divsToCheck[i] == elem){
document.getElementById(divsToCheck[i]).style.display = "block";
}
else{
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
</script>
Again I've attached a snippet below.
function showDiv(elem) {
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
document.getElementById(divsToCheck[i]).style.display = "block";
} else {
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>
function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv1() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "block";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv2() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "block";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv3() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "block";
}
This might not be the sleekest way of doing it, but will get you the results you want. As each button is pressed, all others will close.
You just need to set the display style of the remaining <div>s back to none. The simplest way to do this is to first set all of them to none, then the one you want visible to block:
Note: I’ve used a function which takes the id of the target <div> as a parameter to reduce the amount of code written, but you could easily copy-paste out to separate functions if you require.
function showDiv(divName) {
// First hide all the divs
document.getElementById('BraveDiv').style.display = 'none';
document.getElementById('DeterminedDiv').style.display = 'none';
document.getElementById('CompassionateDiv').style.display = 'none';
document.getElementById('ConsiderateDiv').style.display = 'none';
// Then show the div corresponding to the button clicked
document.getElementById(divName).style.display = 'block';
}
<input type="button" value="Brave" onclick="showDiv('BraveDiv')">
<input type="button" value="Determined" onclick="showDiv('DeterminedDiv')">
<input type="button" value="Compassionate" onclick="showDiv('CompassionateDiv')">
<input type="button" value="Considerate" onclick="showDiv('ConsiderateDiv')">
<div id="BraveDiv" style="display: none">BraveDiv</div>
<div id="DeterminedDiv" style="display: none">DeterminedDiv</div>
<div id="CompassionateDiv" style="display: none">CompassionateDiv</div>
<div id="ConsiderateDiv" style="display: none">ConsiderateDiv</div>
There are alternative ways of doing this which require less code, such as this method using a little CSS and document.querySelectorAll():
function showDiv(divName) {
// First remove the selected class from all divs in output-divs
document.querySelectorAll('#output-divs > .selected').forEach(element => {
element.classList.remove('selected');
});
// Then add it to the div corresponding to the button clicked
document.getElementById(divName).classList.add('selected');
}
.output-div:not(.selected) {
display: none;
}
<input type="button" value="Brave" onclick="showDiv('brave')">
<input type="button" value="Determined" onclick="showDiv('determined')">
<input type="button" value="Compassionate" onclick="showDiv('compassionate')">
<input type="button" value="Considerate" onclick="showDiv('considerate')">
<div id="output-divs">
<div class="output-div selected" id="brave">Brave</div>
<div class="output-div" id="determined">Determined</div>
<div class="output-div" id="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>
$(document).ready(function() {
$("#btn1").click(function(){
showDiv('div1');
});
$("#btn2").click(function(){
showDiv('div2');
});
$("#btn3").click(function(){
showDiv('div3');
});
$("#btn4").click(function(){
showDiv('div4');
});
});
function showDiv(_divId){
$(".div-class").each(function() {
if(!$(this).hasClass('div-hide'))
$(this).addClass('div-hide');
});
$('#' + _divId).removeClass('div-hide');
}
.div-class {
min-height: 50px;
border: 1px solid #eee;
margin: 10px;
padding: 10px;
width: 100%;
}
.div-hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
<div id="div1" class='div-class div-hide'><h3>Div1 Content </h3></div>
<div id="div2" class='div-class div-hide'><h3>Div2 Content </h3></div>
<div id="div3" class='div-class div-hide'><h3>Div3 Content </h3></div>
<div id="div4" class='div-class div-hide'><h3>Div4 Content </h3></div>
Is there a way I can make the on the right appear one at a time? And show by sliding?
Here's the code I'm using to call the
<button onClick="div1()">Try it</button>
<button onClick="div2()">Try it</button>
<button onClick="div3()">Try it</button>
Here is the script I am using
<script>
function div1() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function div2() {
var x = document.getElementById('myDIV2');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function div3() {
var x = document.getElementById('myDIV3');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
I want to make my site look like this
By creating a function where you send the div number ( 1 , 2 , 3 ...) you can slide the concerned div and hide all the others .
Try the bellow snippet : ( using jquery ) ,
function toggleDiv(divNum) {
$("#close").hide();
$(".slide").animate({right:'-200'},350);
if($("#div"+divNum)) {
$("#div"+divNum).animate({right:'0'},350,function(){$("#close").show();});
}
}
$(document).ready(function(){
$("#close").on("click",function(e){
$(".slide").animate({right:'-200'},350);
$(this).hide()
})
})
.slide {
width:200px;
height:100%;
position:absolute;
right:-200px;
top:0;
background:#d2d2d2;
}
#close {
position:absolute;
right:10px;
top:10px;
z-index:10;
display:none;
}
#right-content {
position:absolute;
right:0;
top:0;
overflow:hidden;
width:200px;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="toggleDiv(1)">Try it 1</button>
<button onClick="toggleDiv(2)">Try it 2</button>
<button onClick="toggleDiv(3)">Try it 3</button>
<div id="right-content">
<div id="close">X</div>
<div class="slide" id="div1">content 1</div>
<div class="slide" id="div2">hey I'm content 2</div>
<div class="slide" id="div3">Now it's content 3</div>
<div>
Do like this:
<div id="rightSideDiv" ></div>
<input type="hidden" id="myHiddenField1" value="<b> Info of div 1</b>" />
<input type="hidden" id="myHiddenField2" value="<b> Info of div 2</b>" />
<input type="hidden" id="myHiddenField3" value="<b> Info of div 3</b>" />
<button onClick="doDisplay('myHiddenField1')">Try it</button>
<button onClick="doDisplay('myHiddenField2')">Try it</button>
<button onClick="doDisplay('myHiddenField3')">Try it</button>
<script>
function doDisplay(hiddenFileldID) {
var x = document.getElementById(hiddenFileldID).value;
document.getElementById("rightSideDiv").innerHTML = x;
}
</script>
Each div is shown only after 2 clicks at the start.After 2 initial clicks on each div, each div showhide works with just 1 click. Javascript and html
function showhide() {
var div = document.getElementsByClassName('search_form')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide2() {
var div = document.getElementsByClassName('login')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide3() {
var div = document.getElementsByClassName('carrello')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
.search_form {
display: none;
float: right;
}
.login {
display: none;
float: right;
}
.carrello {
display: none;
float: right;
}
<div class="login-carrello">
<img src="img.png" onClick="showhide();" onmouseover="this.src='img.png'" onmouseout="this.src='gg.png'" width="50px" height="50px">    
<img src="img.png" onClick="showhide2()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
<img src="imgt.png" onClick="showhide3()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
</div>
are both in a single PHP page.Thanks in advance.
The problem is in JavaScript code. Since display property was initially set in css, div.style.display won't give you none. So, you have to change your code a little bit. Like this:
if(div.style.display != "block")
div.style.display = "block";
else
div.style.display = "none";
Once you set the display property using JavaScript code, you can read it using JavaScript.
Because the display property is not actually set (although it is applied through CSS), it's initial value is empty (and thus not equal to 'none' ).
If checked in the reverse order, it would work, but perhaps safer is to use an extra class (with the display property) you toggle instead.
A minimized example:
function showhide(cn) {
var div = document.getElementsByClassName(cn)[0];
div.classList.toggle('show');
}
.login-carrello >img{
width:50px;
height: 50px;
}
.search_form,.login, .carrello {
float: right;
display: none;
}
.show{
display:block;
}
<div class="login-carrello">
<img src="/wp-content/themes/kyro/img/search.png" onClick="showhide('search_form')">
<img src="img.png" onClick="showhide('login')">
<img src="imgt.png" onClick="showhide('carrello')">
</div>
<div class="search_form">search_form</div>
<div class="login">login</div>
<div class="carrello">carrello</div>
The start setting for .search_form,.login, .carrello is display:none, but adding .show overrides that. (I've also taken the liberty of parameterizing the classname to show/hide so only a single function is needed. With late binding it could be automated further, but this stays pretty close to the original)
Not sure if you're looking for a double click, or just two seperate clicks. However if a double click would satisfy your functionality requirement, you could try something like the following:
<img src="img.png" ondblclick="showhide2()" onmouseover="this.src='img.png'" mouseout="this.src='img.png'" width="50px" height="50px">