title: jQuery browser language detection
body: <p><strong>Scenario</strong></p>
  
  <p>I'm in need to create a page (client-side only) that detects what language the browser is using and displays the appropriate class element relating to that language, and hides the others. </p>
  
  <p>English would be the default language, so if none of the cells in the array are matched, this would be displayed.</p>
  
  <p>I'm using the <code>navigator.language</code> and <code>navigator.userLanguage</code> (IE) value to detect which language the browser is currently using.</p>
  
  <p>I currently have some code that's in progress, but i'm not sure of the best way to incorporate all the potential possibilities and then select them using an array.</p>
  
  <p>There's also the possibility of more than one language being tied with a country. Say for instance English as an example has en-us, en-uk etc.. How would I tie this in?</p>
  
  <p><strong>Code</strong> </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="text"&gt;
      &lt;li class="en active"&gt;English: Some text in english&lt;/li&gt;
      &lt;li class="fr"&gt;French: Some text in french&lt;/li&gt;
      &lt;li class="de"&gt;German: Some text in german&lt;/li&gt;
      &lt;li class="it"&gt;Italian: Some text in italian&lt;/li&gt;
      &lt;li class="ja"&gt;Japanese: Some text in japanese&lt;/li&gt;
      &lt;li class="es"&gt;Spanish: Some text in spanish&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS (WIP)</p>
  
  <pre><code>var userLang = navigator.language || navigator.userLanguage,
      countries = ['fr', 'de', 'it', 'ja', 'es'],
      languagues = ['fr', 'de', 'it', 'ja', 'es'];
  
  if (userLang === "fr") {
      $('li').removeClass('active');
      $('.fr').addClass('active');
  }
  </code></pre>
  
  <p><strong>Example</strong></p>
  
  <p><a href="http://jsfiddle.net/xareyo/V7yDy/" rel="noreferrer">Fiddle</a></p>
  
  <p>Thank you for your time.</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>To provide the full solution that worked for me and to ultimately help future users, I used the same layout of <code>HTML</code> from above and combined it with <a href="https://stackoverflow.com/a/18317523/2091693">putvande's jQuery solution</a>.</p>
  
  <p><a href="http://jsfiddle.net/xareyo/rtv45/1/" rel="noreferrer">Here is a working example</a>.</p>
  
  <p>NOTE: This effect triggers the changes depending on the language selected for the browser. As an example on how to do this in Google Chrome:</p>
  
  <ul>
  <li>Go to the settings -></li>
  <li>Scroll down to and click "Show advanced settings..." -></li>
  <li>Click "Language and input settings..." -></li>
  <li>Then select you're desired language, click done and restart your browser.</li>
  </ul>
  
  <p>I hope this helps.</p>