title: How to show content based on url parameter via JavaScript?
body: <p><strong>[Update] code I have edited</strong></p>
  
  <p>First, the plain HTML :</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li&gt;&lt;a href="javascript_accord.php/option/coke/"&gt;coke&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="javascript_accord.php/option/bubble-tea/"&gt;buble-tea&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="javascript_accord.php/option/milk/"&gt;milk&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Second, link page (javascript_accord.php) contain javascript:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
     &lt;script type="text/javascript" src="development-bundle/jquery-1.3.2.js"&gt;&lt;/script&gt;
     &lt;script language="javascript"&gt; 
     $(document).ready(function() {
  var option = 'coke';
  var url = window.location.pathname.split('/');
  option = url[3];
  showDiv(option);
  });
  
      function showDiv(option) {
  $('.boxes').hide();
  $('#' + option).show();
  
     }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="boxes" id="coke"&gt;Coke is awesome!&lt;/div&gt;
      &lt;div class="boxes" id="bubble-tea"&gt;Bubble tea is da bomb!&lt;/div&gt;
      &lt;div class="boxes" id="milk"&gt;Milk is healthy!&lt;/div&gt;
      &lt;p&gt;
  I change my mind:
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="javascript:showDiv('coke')"&gt;Coke&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:showDiv('bubble-tea')"&gt;Bubble Tea&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:showDiv('milk')"&gt;Milk&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
     &lt;/p&gt;
     &lt;a href="http://localhost/selectaccord.php"&gt;Back to main page&lt;/a&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>I found some tutorial about 'show/hide' content based on URL parameter via JavaScript. 
  But I stuck when I change a part of the JavaScript code. </p>
  
  <p>Here are the code that I learned from the tutorial.
  First page contain some links to other page: </p>
  
  <pre><code>If you had to choose a drink, what would you choose:
  &lt;a href="/demo/demo-show-hide-based-on-url.html?option=coke" 
  &lt;a href="/demo/demo-show-hide-based-on-url.html?option=bubble-tea"
  &lt;a href="/demo/demo-show-hide-based-on-url.html?option=milk
  </code></pre>
  
  <p>And here is the code contain in linking page (<code>/demo/demo-show-hide-based-on-url.html</code>) :</p>
  
  <pre><code>&lt;div class="boxes" id="coke"&gt;Coke is awesome!&lt;/div&gt;
  &lt;div class="boxes" id="bubble-tea"&gt;Bubble tea is da bomb!&lt;/div&gt;
  &lt;div class="boxes" id="milk"&gt;Milk is healthy!&lt;/div&gt;
  &lt;p&gt;
  I change my mind:
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="javascript:showDiv('coke')"&gt;Coke&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:showDiv('bubble-tea')"&gt;Bubble Tea&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:showDiv('milk')"&gt;Milk&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/p&gt;
  &lt;a href="/demo/demo.html"&gt;Back to main page&lt;/a&gt;
  </code></pre>
  
  <p>And the javascript : </p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var option = 'coke';
      var url = window.location.href;
      option = url.match(/option=(.*)/)[1];
      showDiv(option);
  });
  function showDiv(option) {
      $('.boxes').hide();
      $('#' + option).show();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>It works greatly, but when I try to change the link page from</p>
  
  <pre><code>href="/demo/demo-show-hide-based-on-url.html?option=coke"
  </code></pre>
  
  <p>into something like this :</p>
  
  <pre><code>href="/demo/demo-show-hide-based-on-url.html/option/coke"
  </code></pre>
  
  <p>And change the url variable in javascript from</p>
  
  <pre><code>var url = window.location.href;
  option = url.match(/option=(.*)/)[1];
  </code></pre>
  
  <p>to</p>
  
  <pre><code>var url = window.location.pathname.split('/');
  option = url[3];
  </code></pre>
  
  <p>And all content in</p>
  
  <pre><code>&lt;div class="boxes" id="..."&gt; 
  </code></pre>
  
  <p>appear.</p>
  
  <p>It supposed to be only selected one will appear. I have tried </p>
  
  <pre><code>var url = window.location.pathname.split('/');
  option = url[3];
  </code></pre>
  
  <p>in simple JavaScript to check whether it will catch the right or value or not. And it does return the right value (coke, milk, bubble-tea).</p>
  
  <p>So, what went wrong? 
  I hope somebody understand this problem and help.</p>