Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1415
  • Last Modified:

Toggle image onclick

I have this script that collapses the content.  I am using an image to represent the button that you click.  I would like for this image to change to minus.gif when it expands the content.


<script>
function exp(strTag ,strAttribute){
var elem = document.getElementsByTagName(strTag);
var elem1 =window.event.srcElement;
for (var i=0;i<elem1.children.length;i++){
elem1.children[i].innerText=="4"?elem1.children[i].innerText="5":elem1.children[i].innerText="4";
}
for (var i =0;i<elem.length;i++)
{
if(elem[i].getAttribute(strAttribute)=="yes")
{
elem[i].style.display=='none'? elem[i].style.display='block':elem[i].style.display='none';
}
}
}
</script>

<div id=howdy onclick="exp('div','exp2');"><img border="0" src="images/plus.gif" width="9" height="9">&nbsp;Click here</div>
<div id=howdy2 exp2='yes' style="display:none;"> Here is the hidden content </div>
0
JuniorBee
Asked:
JuniorBee
1 Solution
 
basicinstinctCommented:
works for me:



<script>
      function exp(strTag ,strAttribute){
      var elem = document.getElementsByTagName(strTag);
      var elem1 =window.event.srcElement;
      for (var i=0;i<elem1.children.length;i++){
      elem1.children[i].innerText=="4"?elem1.children[i].innerText="5":elem1.children[i].innerText="4";
      }
      for (var i =0;i<elem.length;i++)
      {
            if(elem[i].getAttribute(strAttribute)=="yes")
            {
                  var swap=document.getElementById("swapimg");
                  var doExpand= (elem[i].style.display=='none');
                  if(doExpand)
                  {
                        elem[i].style.display='block';
                        swap.src = 'images/minus.gif';
                  
                  }
                  else
                  {
                        elem[i].style.display='none';
                        swap.src = 'images/plus.gif';
                  }
            }
      }
      }
</script>

<div id=howdy onclick="exp('div','exp2');"><img border="0" id="swapimg" src="images/plus.gif" width="9" height="9">&nbsp;Click here</div>
<div id=howdy2 exp2='yes' style="display:none;"> Here is the hidden content </div>
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now