admin管理员组

文章数量:1389772

I have a simple hide/unhide div section using simple JavaScript. I need to have an arrow image, which will toggle the content visibility when clicked, and I want the little arrow to toggle between right/down positions when the content is hidden and unhidden.

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 @ [email protected]
</div>

JavaScript content:

function showOrHide() 
{
    var div = document.getElementById("showorhide");
    if (div.style.display == "block") 
    {
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
    }
}

I have a simple hide/unhide div section using simple JavaScript. I need to have an arrow image, which will toggle the content visibility when clicked, and I want the little arrow to toggle between right/down positions when the content is hidden and unhidden.

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 @ [email protected]
</div>

JavaScript content:

function showOrHide() 
{
    var div = document.getElementById("showorhide");
    if (div.style.display == "block") 
    {
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
    }
}
  • javascript
Share edited Jul 10, 2012 at 3:11 Alexander Schimpf 2,3921 gold badge24 silver badges38 bronze badges asked Jul 9, 2012 at 2:32 user1305810user1305810 7251 gold badge8 silver badges10 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

You would just use simple Javascript to change the image's src attribute between the two arrows, at the same time you are changing 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 @ [email protected]
</div>

Even though an answer was already accepted :)
Another way to do it is using Google's jQuery rotation (you need only the "up-arrow" image for this example):

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode./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 @ [email protected]
</div>
</body>
</html>

本文标签： javascript hideunhidebut want an arrow to point downup on hideunhideStack Overflow

版权声明：本文标题：javascript hideunhide, but want an arrow to point downup on hideunhide - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744652411a2617763.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。