title: Show div and hide siblings when clicking on div
body: <p>I am having a lot of trouble figuring out how to write the appropriate javascript or jquery to show a specific div when my clickable div is clicked, meanwhile hiding all other divs within the same class that were previously clicked.</p>
  
  <p>HTML
       </p>
  
  <pre><code>&lt;img src="images/Current system &amp; actors.jpg" alt="" usemap="#Map" style="left:275px; position:absolute; top:247px; width:100%; z-index:1; " usermap="#mymap" &gt;
  
  &lt;div id="items" &gt;       
      &lt;div class="sqtrigger" id="xcrudeoil" style="position:absolute; left:200px; top:200px; " onclick="MM_showHideLayers('crudeoil','','show')" &gt;&lt;/div&gt;
      &lt;div class="sqtrigger" id="xNP" style="position:absolute; left:300px; top:200px; " onclick="MM_showHideLayers('NP','','show')" &gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="info" &gt;
      &lt;div id="crudeoil" class="textbox" &gt;Crude oil description &lt;/div&gt;
      &lt;div id="NP" class="textbox" &gt;NP description&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>function MM_showHideLayers() { //v9.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
  
      for (i=0; i&lt;(args.length-2); i+=3) {
          with (document) if (getElementById &amp;&amp; ((obj=getElementById(args[i]))!=null)) {
              v=args[i+2];
  
              if (obj.style) { 
                  obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; 
              }
  
              obj.visibility=v; 
          }
      }
  }
  </code></pre>
  
  <p>I've found information on doing this with <code>&lt;area&gt;</code> tag however I'd like to avoid rewriting my clickable divs to areas within my map because I have over 100 clickable divs and need a work around solution for now...</p>
  
  <p>Example --> <a href="http://jsfiddle.net/berqK/4/" rel="nofollow">http://jsfiddle.net/berqK/4/</a></p>
  
  <pre><code>var links = document.getElementById('oshastatemap');
  
  for (var i = 0; i &lt; links.children.length; i++) {
      links.children[i].onclick = function(ev) {
          target_id = this.id.replace('x', '');
          s = document.getElementById(target_id);
          states = document.getElementsByClassName('show');
  
          for (var j = 0; j &lt; states.length; j++) {
              states[j].className = '';
          }
  
          s.className = 'show';
      };
  }
  </code></pre>
  
  <p>So, how can I adjust this code I've found for showing a div when a link is clicked, to showing a div when a <strong>div</strong> is clicked while still hiding the others?</p>
  
  <p>In reference to my divs  ... 
  How can I make id="xcrudeoil" show id="crudeoil" (and xNP show NP) while at the same time hiding all child divs of div id=info (or within class="textbox")?</p>
  
  <p>Here is an sample of what I have working so far. (note: in my browser the divs appear but I can't see them in fsfiddle): <a href="http://jsfiddle.net/ZCantrall/Ru82F/6/" rel="nofollow">http://jsfiddle.net/ZCantrall/Ru82F/6/</a></p>
  
  <p>Thanks a lot in advance! I'd really appreciate ANY advice that you can offer.</p>
  
  <p>*EDIT // Second attempt with the CSS from /jsfiddle.net/Ru82F/7/ and the following HTML &amp; JS</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
      &lt;title&gt;IES&lt;/title&gt;
  
  &lt;link href="IES.css" rel="stylesheet" media="screen" type="text/css" &gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="items" &gt;       
  &lt;div class="sqtrigger" id="xcrudeoil" &gt;Oil&lt;/div&gt;    
  &lt;div class="sqtrigger" id="xNP" &gt;NP&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="info" &gt;
  &lt;div id="crudeoil" class="textbox" &gt;Crude oil description &lt;/div&gt;
  &lt;div id="NP" class="textbox" &gt;NP description&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt; src="jquery-1.9.1.js" &lt;/script&gt;
  &lt;script&gt; src="jquery-migrate-1.1.0.js" &lt;/script&gt;
  &lt;script&gt;
      $('.sqtrigger').on('click', function(e) {
      var targetId = this.id.replace('x', '');    
  
      $('#info .textbox').hide();
      $('#' + targetId).show();
  });
  &lt;/script&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>