title: Toggle div through multiple <a> tag
body: <p>I am able to toggle through a js function that uses href id for matching to the corresponding div or td to toggle. </p>
  
  <p>But My goal is to be able to toggle the div/td with another href that is found at the bottom of the page. This href contains the same id and name.</p>
  
  <p>Here is an example:<a href="http://jsfiddle.net/X8U82/15/" rel="nofollow">jsfiddle</a> (The toggle function works in my remote server but it doesn't somehow in jsfiddle)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function showonlyonev2(thechosenone) {
        var newboxes = document.getElementsByTagName("div");
        for(var x=0; x&lt;newboxes.length; x++) {
              name = newboxes[x].getAttribute("name");
              if (name == 'newboxes-2') {
                    if (newboxes[x].id == thechosenone) {
                          if (newboxes[x].style.display == 'block') {
                                newboxes[x].style.display = 'none';
                          }
                          else {
                                newboxes[x].style.display = 'block';
                          }
                    }else {
                          newboxes[x].style.display = 'none';
                    }
              }
        }
  }​
  &lt;/script&gt;
  
  &lt;table&gt;
     &lt;tr&gt;
        &lt;td&gt;
           &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt;
              &lt;a id="myHeader1-2" href="javascript:showonlyonev2('newboxes1-2');" &gt;toggle&lt;/a&gt;
           &lt;/div&gt;
           &lt;div name="newboxes-2" id="newboxes1-2" name="div1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;"&gt;Div #1&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt;
              &lt;a id="myHeader2-2" href="javascript:showonlyonev2('newboxes2-2');" &gt;toggle&lt;/a&gt;
           &lt;/div&gt;
           &lt;div name="newboxes-2" id="newboxes2-2" name="div2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;"&gt;Div #2&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt;
              &lt;a id="myHeader3-2" href="javascript:showonlyonev2('newboxes3-2');" &gt;toggle&lt;/a&gt;
           &lt;/div&gt;
           &lt;div name="newboxes-2" id="newboxes3-2" name="div3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;"&gt;Div #3&lt;/div&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;div style="padding-top:20px;"&gt;
      &lt;a id="myHeader1-2" name="div1" href="javascript:showonlyonev2('newboxes1-2');"&gt;See Div #1&lt;/a&gt;  
  &lt;/div&gt;    
  
  &lt;div style="padding-top:20px;"&gt;
      &lt;a id="myHeader2-2" name="div2" href="javascript:showonlyonev2('newboxes2-2');"&gt;See Div #2&lt;/a&gt;  
  &lt;/div&gt;
  
  &lt;div style="padding-top:20px;"&gt;
      &lt;a id="myHeader3-2" name="div3" href="javascript:showonlyonev2('newboxes3-2');"&gt;See Div #3&lt;/a&gt;  
  &lt;/div&gt;    ​
  </code></pre>