Multiple hidden div's on a page with 'plus' and 'minus' gifs?

JavaScript
1

Hello everyone,

I’m using the following code to ‘hide’ or ‘show’ hidden content on a page. The javascript toggles the display of the content and changes the image from ‘plus.gif’ to ‘minus.gif’. However, the script was written to work with a single item. With two or more ‘hidden’ divs (as I have below), there are multiple instances of the gif’s (plus and minus) and the code will only change the first one.

Can the code (the javascript OR the html) be changed so that there can be multiple ‘hidden’ divs on a page and the appropriate gif changes?

Thanks in advance!

<script language="javascript">
imageX='plus';
function toggleDisplay(e){
element = document.getElementById(e).style;
 if (element.display=='none') {element.display='block';}
 else {element.display='none';}
 if (imageX=='plus') {document.getElementById('imagePM').src='minus.gif';imageX='minus';}
 else {document.getElementById('imagePM').src='plus.gif';imageX='plus';}
}
</script>

<!-- hidden div #1 -->
<div><a title="Show Tables" href="javascript:toggleDisplay('hiddendiv1')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id=imagePM /></a> title to show for hidden div #1 </div>
<div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv1">
  <p style="margin: 0; padding: 0;">content of hidden div #1</p>
</div>
<!-- hidden div #2 -->
<div><a title="Show Tables" href="javascript:toggleDisplay('hiddendiv2')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id=imagePM /></a> title to show for hidden div #2 </div>
<div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv2">
  <p style="margin: 0; padding: 0;">content of hidden div #2</p>
</div>
2

You shouldn’t duplicate ID’s on the page. As you can see, the image for the div has the div name with _img on the end.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" media="screen" />
        <script type="text/javascript">
        function toggle(el) {
            if(typeof(el) == 'string')
                el = document.getElementById(el);
            var img = document.getElementById(el.id + '_img');
            if(!img) {
                alert('Unable to locate image');
                return;
            }
            switch(el.style.display) {
                case 'none' : 
                    img.src = 'minus.gif';
                    el.style.display = 'block';                
                break;
                case 'block' :
                    img.src = 'plus.gif';
                    el.style.display = 'none';        
                break;
                default:
                    img.src = 'minus.gif';
                    el.style.display = 'block';
                break;
            }
            alert(img.src);
            alert(el.style.display);
        }
        </script>
    </head>
    <body>
        
    <!-- hidden div #1 -->
    <div><a title="Show Tables" href="javascript:toggle('hiddendiv1')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id="hiddendiv1_img" /> title to show for hidden div #1 </a></div>
    <div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv1">
        <p style="margin: 0; padding: 0;">content of hidden div #1</p>
    </div>
    <!-- hidden div #2 -->
    <div><a title="Show Tables" href="javascript:toggle('hiddendiv2')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id="hiddendiv2_img" /> title to show for hidden div #2 </a></div>
    <div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv2">
        <p style="margin: 0; padding: 0;">content of hidden div #2</p>
    </div>

    </body>
</html>
3

Wow, that is fantastic. Thank you so much for the help and answering so quickly! I really appreciate it.

4

Here is a script example that I developed for a simple and flexible solution.

It’s very similar to your original code, with the difference I don’t wrap an <a> tag around the image, but I use an “onclick” to activate it. The only requirements is the activating element is has a “Parent” element that is the sibling before the show/hide element.

<script type="text/javascript">
function showHide(vThis)
{
// http://www.javascriptjunkie.com
// alert(vSibling.className + " " + vDef_Key);
    vParent = vThis.parentNode;
    vSibling = vParent.nextSibling;

    if(vSibling.style.display == "none")
    {
      vThis.src="/img/collapse.gif";
      vThis.alt = "Hide Div";
      vSibling.style.display = "block";
    } else {
      vSibling.style.display = "none";
      vThis.src="/img/expand.gif";
      vThis.alt = "Show Div";
    } 
return;
}
</script>


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SHOW/HIDE Div with Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h3>Show/Hide Div Example</h3>
<div style="margin-top:5px;">
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showHide(this);" />Title #1</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #1 div</p>
</div>
<div><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showHide(this);" />Title #2</div>
<ul style="margin-top:5px; display:none; border:1px solid red;">
    <li> THis is the content of the #2 div</li>
    <li> This is more content </li>
</ul>
</div>
</div>
</body>
</html>