An Image Link that switches when clicked

**riz-man** · 02-04-2013 09:42 AM

Hi there,

I'm using the following code on a website that hides a section of the page when you visit it - the section is revealed by either clicking on an image (of a plus sign) or the text next to it.

The code is as follows...

<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>

...to work with...

<a href="javascript:hideshow(document.getElementById('Hidden1'))"><img src="images/plus.png" width="18" height="18" alt="View Hidden Section 1" /></a>

<a href="javascript:hideshow(document.getElementById('Hidden1'))"> - View Hidden Section 1</a>

<div id="Hidden1" style="display: none;">
Hidden Info
</div>

Could someone please tell me how this code can be modified so that when the section expands to reveal the hidden section, the plus sign switches to a minus sign?

**JMRKER** · 02-04-2013 02:53 PM

See if this is closer to your needs.
Note the differences between this and your code.

Code:

<html>
<body>

<a href="#" onclick="hideshow(document.getElementById('Hidden1'));return false">
<img id="p_m_img" src="" width="18" height="18" alt="View Hidden Section 1" />
 - View Hidden Section 1</a>

<div id="Hidden1" style="display: none;">Hidden Info</div> 

<script type="text/javascript">

var imgPics = [
  "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSbFXaAxBLBvzn6Dc2yIIsWDm6Jg_8aK6AHf-vzXDj3MN1BfDAJ",
  "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQmN1dIbW-DjGMUZOJzTQcwyF-pMnT58i7P1WrBsArN_hnNBEiN"
];

function hideshow(which){
  if (!document.getElementById) return;
  if (which.style.display=="block") {
    which.style.display="none"
    document.getElementById('p_m_img').src = imgPics[0];
  } else {
    which.style.display="block"
    document.getElementById('p_m_img').src = imgPics[1];
  }
}
window.onload = function() {
  document.getElementById('p_m_img').src = imgPics[0];
}
</script>

</body>
</html>

Or alternatively with a few typing short-cuts...

Code:

<html>
<body>

<a href="#" onclick="hideshow('Hidden1');return false">
<img id="p_m_img" src="" width="18" height="18" alt="View Hidden Section 1" /> - View Hidden Section 1</a>

<div id="Hidden1" style="display: none;">Hidden Info</div> 

<script type="text/javascript">
var imgPics = [
  "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSbFXaAxBLBvzn6Dc2yIIsWDm6Jg_8aK6AHf-vzXDj3MN1BfDAJ",
  "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQmN1dIbW-DjGMUZOJzTQcwyF-pMnT58i7P1WrBsArN_hnNBEiN"
];
function $_(IDS) { return document.getElementById(IDS); }
function hideshow(which){
  if (!$_(which)) return;
  if ($_(which).style.display=="block") {
    $_(which).style.display="none";
    $_('p_m_img').src = imgPics[0];
  } else {
    $_(which).style.display="block";
    $_('p_m_img').src = imgPics[1];
  }
}
window.onload = function() {
  $_('p_m_img').src = imgPics[0];
}
</script>

</body>
</html>

Thread: An Image Link that switches when clicked

Thread Tools

Display

An Image Link that switches when clicked

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions