title: JS: Hiding DIV based on another DIVs content
body: <p>I am looking to hide a number of DIVs based upon the specific text of another DIV.  My Javascript (below) isn't working.</p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>&lt;div id="LEGEND"&gt;abAB&lt;/div&gt;
  
  &lt;div id="small-a"&gt;&lt;/div&gt; 
  &lt;div id="small-b"&gt;&lt;/div&gt; 
  &lt;div id="big-a"&gt;&lt;/div&gt; 
  &lt;div id="big-b"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>If the <em>LEGEND</em> DIV contains the text a, then I want it to show only DIV <em>small-a</em>.<br/>
  If the <em>LEGEND</em> DIV contains the text bA, then I want it to show only DIV <em>small-b</em> and <em>big-a</em>.</p>
  
  <p><strong>The Javascript:</strong></p>
  
  <pre><code>&lt;script&gt;
  window.onload = function ShowHide{
  
      if (document.getElementById('LEGEND').indexOf("a") &gt; 0){
          document.getElementById('small-a').style.display = 'block';}
      if (document.getElementById('LEGEND').indexOf("b") &gt; 0){
          document.getElementById('small-b').style.display = 'block';}
      if (document.getElementById('LEGEND').indexOf("A") &gt; 0){
          document.getElementById('big-a').style.display = 'block';}
      if (document.getElementById('LEGEND').indexOf("a") &gt; 0){
          document.getElementById('big-b').style.display = 'block';}    
  &lt;/script&gt;
  </code></pre>