Geek Answers Handbook

Javascript hide / unhide, but you need the arrow to point down / up to hide / unhide

I have a simple div / unhide div section using simple JavaScript. I need to have an arrow image that will switch to the visibility of the content when clicked, and I want the small arrow to switch between the right / bottom positions when the content is hidden and not hidden.

HTML content:

<a href="javascript:showOrHide();"><img src="Image_Files/Copyright.png" alt="BioProtege Inc" border="0" /></a> <img src="Image_Files/Copyright_Arrow_Hidden.png" alt="Arrow" border="0" /> <div id="showorhide"> Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz <br /> Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca </div>

JavaScript content:

 function showOrHide() { var div = document.getElementById("showorhide"); if (div.style.display == "block") { div.style.display = "none"; } else { div.style.display = "block"; } }
+4
source share
2 answers

You just use simple Javascript to change the src attribute of the image between the two arrows, at the same time you change the display attribute:

 <script type="text/javascript"> function showOrHide() { var div = document.getElementById("showorhide"); if (div.style.display == "block") { document.getElementById("img-arrow").src = "Image_Files/arrow-hidden.jpg"; div.style.display = "none"; } else { div.style.display = "block"; document.getElementById("img-arrow").src = "Image_Files/arrow-showing.jpg"; } } </script> <img src="arrow-hidden.jpg" id="img-arrow" alt="" /> <div id="showorhide"> Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz <br /> Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca </div>
+3
source

Even if the answer has already been accepted :)
Another way to do this is to use the jQuery Google rotation (for this example, you only need an up arrow image):

 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function(){ var value = 0 $("img").click(function(){ $("#showorhide").toggle(); value +=180; $(this).rotate({ animateTo:value}); }); }); </script> </head> <body> <img src="arrow.jpg" alt="BioProtege Inc" border="0" id="myimg" name="myimg" /> <div id="showorhide"> Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz <br /> Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca </div> </body> </html>
+2
source

More articles:


All Articles