CODEWITHSUNDEEP
javascripthideshow
user3904924
user3904924

Reputation: 33

Show and hide images with div

Alright, I want to edit this code so if I for example press button 1 it first shows an image and then if I press button 1 again it should hide the image. Same goes for all buttons. I wonder if someone can rewrite my script so that becomes possible.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='/js/lib/dummy.js'></script>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .hidden {
    display: none;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
window.show = function(elementId) { 
    var elements = document.getElementsByTagName("div");
    for (var i = 0; i < elements.length; i++)
        elements[i].className = "hidden";

    document.getElementById(elementId).className = "";
}
}//]]>  

</script>


</head>
<body>
<button type="button" onclick="show('id1');" >Button 1</button>
<button type="button" onclick="show('id2');" >Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<button type="button" onclick="show('id4');">Button 4</button>

<div id="id1" class="hidden"><img  src="alfagel.gif" height="280" width="120"/></div>
<div id="id2" class="hidden"><img  src="alfagel.gif" height="280" width="120"/></div>
<div id="id3" class="hidden"><img  src="bjorktrast.gif" height="280" width="120"/></div>
<div id="id4" class="hidden">text 4</div>

</body>


</html>

Upvotes: 0

Views: 940

Answers (3)

Jason Smith
Jason Smith

Reputation: 23

jQuery has a hide and show method that should work. Example:

$('id1').hide()

Upvotes: 1

Kostas
Kostas

Reputation: 1903

Import jQuery

Use $.fn.toggleClass

$('div').toggleClass('hidden');

Full example: http://jsfiddle.net/sLLL7/

Upvotes: 1

Viet Trang
Viet Trang

Reputation: 21

The quickest way to do this would be to use jQuery and look into it's toggle() function. Otherwise..perhaps store the states of the buttons as boo leans and hide/show conditionally based on the value.

Upvotes: -1

Related Questions