onClick show/hide Want to collapse image size on hide javascript

Question

I've just put this script together, but theres a problem with it, if the image is sat between text, it keeps the height difference when it's not visible, anyone got any ideas on how to collapse the size or something simlar when show/hiding?

Body

    a onclick="showImage();"> Click here</a>
    img id="loadingImage" src="image.png" style="visibility:hidden"/>

Script

function showImage(){
    var toggleImage = document.getElementById("loadingImage");
      if(toggleImage.style.visibility == "visible") {
         document.getElementById('loadingImage').style.visibility='hidden';
     }else{
        document.getElementById('loadingImage').style.visibility='visible';
}
}

@Switchfire : http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone refer this link for better understanding — Pbk1303, Sep 27 '13 at 11:48

score 5 · Accepted Answer · answered Sep 27 '13 at 11:36

5

Don't use visibility. Use display property instead.

As you can see @ MDN:

The (visibility) hidden value hides an element but leaves space where it would have been.

answered Sep 27 '13 at 11:36

gnclmorais

4,897
5
30
41

onClick show/hide Want to collapse image size on hide javascript

1 Answers1