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

JavaScript
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>