title: Toggle div by triggering and image click mechanism
body: <p>I am currently working with the toggle div function. I am using images to be the triggering point for toggling. For example when a div is close an image with a &quot;plus&quot; signs appears to indicate the user to expand and vice versa for compressing the div. The only issue is that I am using two sets of images for expanding and compressing divs but I can only get a set to work but not both. The is example I have doesn't work well in jsfiddle but if you like to look at it there here is the link: <a href="http://jsfiddle.net/sQnd9/4/" rel="nofollow noreferrer">http://jsfiddle.net/sQnd9/4/</a></p>
  <p>Here is my example:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  function toggle1(showHideDiv, switchImgTag) {
          var ele = document.getElementById(showHideDiv);
          var imageEle = document.getElementById(switchImgTag);
          if(ele.style.display == &quot;block&quot;) {
                  ele.style.display = &quot;none&quot;;
          imageEle.innerHTML = '&lt;img src=&quot;images/Plus_Circle.png&quot;/&gt;';
          
          }
          else {
                  ele.style.display = &quot;block&quot;;
                  imageEle.innerHTML = '&lt;img src=&quot;images/Minus_Circle.png&quot;/&gt;';
                  
          }
  }
  &lt;/script&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt; 
  
  function toggle2(showHideDiv2, switchImgTag2) { 
          var ele = document.getElementById(showHideDiv2); 
          var imageEle = document.getElementById(switchImgTag2); 
          if(ele.style.display == &quot;block&quot;) { 
                  ele.style.display = &quot;none&quot;; 
          imageEle.innerHTML = '&lt;img src=images/arrow_open.png/&gt;'; 
          } 
          else { 
                  ele.style.display = &quot;block&quot;; 
                  imageEle.innerHTML = '&lt;img src=images/arrow_close.png/&gt;'; 
          } 
  } 
  &lt;/script&gt; 
  
  
  &lt;div&gt;&lt;a id=&quot;imageDivLink&quot; href=&quot;javascript:toggle1('contentDivImg', 'imageDivLink');&quot;&gt;&lt;img src=&quot;images/Plus_Circle.png&quot;;/&gt;&lt;/a&gt;Example&lt;/div&gt;  
  &lt;br /&gt;
         &lt;div id=&quot;contentDivImg&quot; style=&quot;display:none;&quot;&gt;
         Example1-Content
         &lt;/div&gt;
  
  
  &lt;div&gt;&lt;a id=&quot;imageDivLink2&quot; href=&quot;javascript:toggle2('contentDivImg2', 'imageDivLink2');&quot;&gt;&lt;img src=&quot;images/Plus_Circle.png&quot;;/&gt;&lt;/a&gt;Example2&lt;/div&gt;  
  &lt;br /&gt;
         &lt;div id=&quot;contentDivImg2&quot; style=&quot;display:none;&quot;&gt;
         Example2-Content
         &lt;/div&gt;
  </code></pre>