title: Alternative to using onfocus on a div to change border
body: <p>When the user clicks on one of these divs I want it to do 2 things:</p>
  
  <ol>
  <li>Show the contents of the div in the div #bigScreen</li>
  <li>Highlight the tiny div they clicked on with a border. Once they click on something else I want the border to revert back to its original state.</li>
  </ol>
  
  <p>Got it to turn the border on but cant turn it off. See example below.</p>
  
  <pre><code>&lt;div id="2" class="previewPanelEntry" onclick="showIt(this.id)"&gt;2&lt;/div&gt;
  
  &lt;script&gt;
  function showIt(id){
    /*-- onclick find all items highlighted and unhighlight them so there is only one selected --*/
    var highlighted = document.getElementsByClassName('highlighted');
    for (var d in highlighted) {
      /*-- THIS IS WHAT DOESNT WORK --*/
      d.className = "previewPanelEntry";
    }
  
    /*-- put contents of most recently selected div on the big screen --*/
    bigScreen.innerHTML = selection[id];
  
    /*-- highlight the most recently selected div --*/
    document.getElementById(id).className ="highlighted";
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Heres a more complete version but jsfiddle wont run it right because javascript needs to load after the html. Not sure how to specify this in jfiddle.</p>
  
  <p><a href="http://jsfiddle.net/94zk7/2/" rel="nofollow">http://jsfiddle.net/94zk7/2/</a></p>