title: Show/hide element based on clicked href of link
body: <p>I am new to JavaScript and actually quite desperate by now</p>
  
  <p>I have an HTML file that:</p>
  
  <ol>
  <li>gets data from an XML file and displays them in various divs (e.g.  )</li>
  <li>these divs are hidden (by default) by a class name (class='box')</li>
  <li>when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.</li>
  <li>then I add a new class name ('show') - so that this element shows up!</li>
  </ol>
  
  <p>If you run the code you will see that every time you click on a link a new div is displayed...</p>
  
  <p>So current problems:</p>
  
  <ol>
  <li>replace already shown divs with the new clicked ID so that only one div shows up every time.</li>
  <li>How can I avoid inserting the onClick event in every single  tag - and make this more automated?</li>
  </ol>
  
  <hr>
  
  <p>My code is as follows:</p>
  
  <pre><code>function showContent(obj)
  {
  var linkTo = obj.getAttribute("href");
  var newlinkTo=linkTo.replace('#','');
  //alert (newlinkTo);
  
  document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";   
  document.getElementById(newlinkTo).className += " Show";
  
  return true;
  }
  
  &lt;a href="#b0" onClick="return showContent(this);"&gt;
  &lt;div id="text_content"&gt; link2 &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a href="#b1" onClick="return showContent(this);"&gt;
  &lt;div id="text_content"&gt; link 1 &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;div class='box' id='b0'&gt; abstract content &lt;/div&gt;
  &lt;div class='box' id='b1'&gt; introduction content &lt;/div&gt;
  </code></pre>