How would I make my code show one image at time?

Question

<!DOCTYPE html>
    <html lang ="en">
    <head>
    <title> VIS</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" >

    function showImage(id){
          if(document.getElementById(id).style.visibility =='visible')
             document.getElementById(id).style.visibility = 'hidden';
           else
              document.getElementById(id).style.visibility= 'visible';
        }
    </script>
    </head>
    <body>


    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Pum"/>
    <button onclick="showImage('Pum');">Pumpkins</button>
    </div>

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Straw"/>
    <button onclick="showImage('Straw');">Strawberries</button>
    </div>

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Ras"/>
    <button onclick="showImage('Ras');">Rasberries</button>
    </div>








    </body>

    </html>

My code works fine, but I want it to show one image at time.When I click one of them, it will hide the other .

With my code,can show as many images as I want and as few images. How could I do this , could I send multiple ids as parameters ?

Any help would be great.

http://stackoverflow.com/questions/6641136/what-is-the-best-way-to-implement-multiway-toggle-using-javascript-jquery — Max, Oct 18 '15 at 17:03
You could also make all images invisible, then show only the one you clicked. — Max, Oct 18 '15 at 17:05

Suchit kumar · Accepted Answer · 2015-10-18T17:41:59.797

Try like this:

First get all the images and hide them , if you want any specific to be shown at load time just ignore that index.after loading you can do your button action as you are trying to.If you want to hide the rest of the visible images on button click then just get the visible image and hide it and show the clicked one.

     <!DOCTYPE html>
                <html lang ="en">
                <head>
                <title> VIS</title>
                <meta charset="utf-8"/>
              
                </head>
                <body>
            
            
                <div style="position: relative; visibility: visible;"> 
                <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
                          alt="Pumpkins" id="Pum"/>
                <button onclick="showImage('Pum');">Pumpkins</button>
                </div>
            
                <div style="position: relative; visibility: visible;"> 
                <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
                          alt="Pumpkins" id="Straw"/>
                <button onclick="showImage('Straw');">Strawberries</button>
                </div>
            
                <div style="position: relative; visibility: visible;"> 
                <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
                          alt="Pumpkins" id="Ras"/>
                <button onclick="showImage('Ras');">Rasberries</button>
                </div>
                </body>
              <script type="text/javascript" >
              removeVisibility();
                
                function showImage(id){
                       removeVisibility();
                      if(document.getElementById(id).style.visibility =='hidden')
                         document.getElementById(id).style.visibility = 'visible';
                    }

                 function removeVisibility(){
              var imgs=document.getElementsByTagName('img');//get all the images
              for(var i=0;i< imgs.length;i++){
               imgs[i].style.visibility= 'hidden'; //hide them
              }
                          }
                </script>
                </html>

An answer that has zero explanation can always be improved by explaining what you have done and not making the reader have to do a visual diff to find what the actual recommendation is. Please add relevant explanation for what you changed and why. — jfriend00, Oct 18 '15 at 17:13
Well, I tried putting an if/if else statement. If this hidden , then his should be visible . — user3251123, Oct 18 '15 at 17:24
if visible then what should happen.may be i'm not getting your problem can you please elaborate. — Suchit kumar, Oct 18 '15 at 17:26
For example, I have three images. If one image is showing, then rest will hide. If I click another image button it will become visible, and the rest will hide . — user3251123, Oct 18 '15 at 17:31

How would I make my code show one image at time?

1 Answers1