Language Switcher

Language Divs

State saved in Cookie

<style>
a        {color: #00f; background: #fff; text-decoration: none; }
a:hover  { color: #fff; background: #00f; }
a:active { color: #00f; background: #00f;}
.active { color: #000; background: #ff0;}
.hidden { display: none; }
</style>

<script>
// Supported languages, first is default
const languages = ['en', 'ja', 'at']

// Read activeLang from Cookie OR init with 'en'
var activeLang = document.cookie.split("; ").find((row) => row.startsWith("lang="))?.split("=")[1] || languages[0];

// Set activeLang & Cookie
function setLang(l) {
  document.cookie = `lang=${l}`
  activeLang = l
  showLang(l)
}

// Show/hide all elements with activeLang class
const languageClasses = languages.map(e=>'.'+e)
const languageIDs = languages.map(e=>'#'+e)
function showLang(l) {
  document.querySelectorAll(languageIDs).forEach(e => e.classList.remove('active'))
  document.querySelectorAll('#'+l).forEach(e => e.classList.add('active'))
  document.querySelectorAll(languageClasses).forEach(e => e.classList.add('hidden'))
  document.querySelectorAll('.'+l).forEach(e => e.classList.remove('hidden'))
}

// Document Ready
document.addEventListener("DOMContentLoaded", (e) => {
  showLang(activeLang)
})
</script>

<div id="lang">
 <a href="" onClick="setLang('ja');return false" id="ja">JA</a>
 <a href="" onClick="setLang('en');return false" id="en">EN</a>
 <a href="" onClick="setLang('at');return false" id="at">AT</a>
</div>

Install additional language:

Change user language: