title: Displaying Div's based on URL using Javascript
body: <p>I’m new to Javascript and I’m having trouble displaying and hiding some divs based on url’s.</p>
  
  <p>I have 4 divs that need to be shown depending on the url.
  The 4 divs are:</p>
  
  <p><strong>Div 1</strong></p>
  
  <pre><code>&lt;body onload="callOnPageLoad1()”&gt;
  &lt;div id="homeName" style="display:block"&gt;&lt;h5&gt;HOME&lt;/h5&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and needs to be displayed only when at:</p>
  
  <pre><code>http://www.fitzofdesign.com/
  </code></pre>
  
  <p><strong>Div 2</strong></p>
  
  <pre><code>&lt;body onload="callOnPageLoad2()”&gt;
  &lt;div id="profilesName" style="display:block"&gt;&lt;h5&gt;PROFILES&lt;/h5&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and needs to be displayed only when at:</p>
  
  <pre><code>http://www.fitzofdesign.com/?category=Profiles
  </code></pre>
  
  <p><strong>Div 3</strong></p>
  
  <pre><code>&lt;body onload="callOnPageLoad3()”&gt;
  &lt;div id="retailName" style="display:block"&gt;&lt;h5&gt;RETAIL&lt;/h5&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and needs to be displayed only when at:</p>
  
  <pre><code>http://www.fitzofdesign.com/?category=Retail
  </code></pre>
  
  <p><strong>Div 4</strong></p>
  
  <pre><code>&lt;body onload="callOnPageLoad4()”&gt;
  &lt;div id="blogName" style="display:block"&gt;&lt;h5&gt;BLOG&lt;/h5&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and needs to be displayed only when at:</p>
  
  <pre><code>http://www.fitzofdesign.com/?category=Blog
  </code></pre>
  
  <p>The JS I’m using is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function callOnPageLoad1()
  {
  var url = window.location.href;
  if(url == "http://www.fitzofdesign.com/")
  {
  document.getElementById('homeName').style.display = 'block';
  document.getElementById('profilesNamed').style.display = 'none';
  document.getElementById('retailName').style.display = 'none';
  document.getElementById('blogName').style.display = 'none';
  }
  else {
  document.getElementById('homeName').style.display = 'none';
  }
  }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  function callOnPageLoad2()
  {
  var url = window.location.href;
  if(url == "http://www.fitzofdesign.com/?category=Profiles")
  {
  document.getElementById('homeName').style.display = 'none';
  document.getElementById('profilesNamed').style.display = 'block';
  document.getElementById('retailName').style.display = 'none';
  document.getElementById('blogName').style.display = 'none';
  }
  else {
  document.getElementById('profilesNamed').style.display = 'none';
  }
  }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  function callOnPageLoad3()
  {
  var url = window.location.href;
  if(url == "http://www.fitzofdesign.com/?category=Retail")
  {
  document.getElementById('homeName').style.display = 'none';
  document.getElementById('profilesNamed').style.display = 'none';
  document.getElementById('retailName').style.display = 'block';
  document.getElementById('blogName').style.display = 'none';
  }
  else {
  document.getElementById('retailName').style.display = 'none';
  }
  }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  function callOnPageLoad4()
  {
  var url = window.location.href;
  if(url == "http://www.fitzofdesign.com/?category=Blog")
  {
  document.getElementById('homeName').style.display = 'none';
  document.getElementById('profilesNamed').style.display = 'none';
  document.getElementById('retailName').style.display = 'none';
  document.getElementById('blogName').style.display = 'block';
  }
  else {
  document.getElementById('blogName').style.display = 'none';
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>At present the only time this is <strong>working</strong> correctly is when I’m at:</p>
  
  <pre><code>http://www.fitzofdesign.com/
  </code></pre>
  
  <p>because Div 1 appears and the other 3 Divs are hidden.</p>
  
  <p>This is <strong>not working</strong> when I’m at: </p>
  
  <pre><code>http://www.fitzofdesign.com/?category=Profiles
  http://www.fitzofdesign.com/?category=Retail
  http://www.fitzofdesign.com/?category=Blog
  </code></pre>
  
  <p>because Div 2, 3 &amp; 4 are all incorrectly displaying for each URL.</p>
  
  <p>I hope this makes sense.</p>
  
  <p>Can anyone help please?</p>
  
  <p>Thanks Rowan</p>