Free Language Switcher / Toggle Code in JavaScript
This is a useful but of code that you can use to toggle between anything. In this case, we used it to create a simple language switcher, but the same concept can be used for anything.
Open Active specializes in website development, e-commerce, branding, online and social media marketing, search engine optimization and localization for individuals and organizations large and small around the world. We specialize in launching new products on the Shopify platform!Contact us at: +1 (212) 537-4042.
Open Active se especializa en desarrollo de sitios web, comercio electrónico, desarrollo de marcas, marketing en línea y en redes sociales, posicionamiento en buscadores, así como localización para individuos y organizaciones grandes y pequeñas en todo el mundo. ¡Nos especializamos en lanzar nuevos productos en la plataforma de Shopify!Comuníquese con nosotros al: (212) 537-4042.
Open Active هي شركة متخصصة في تطوير مواقع الويب، والتجارة الإلكترونية، وتصميم العلامات التجارية، والتسويق عبر الإنترنت ومواقع التواصل الاجتماعي، وتحسين محركات البحث، والترجمة التي تتسم بالطابع المحلي للأفراد والمؤسسات الكبيرة والصغيرة في جميع أنحاء العالم، ونحن نتخصص في إطلاق المنتجات الجديدة على منصات Shopify.تواصل معنا على: + (212) 537-4042.
This is the localized code for our select list switcher
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website Localization Example</title>
<style>
#localization {
margin: 0 0 0 20px;
}
.localization-container {
margin: 20px 0 0 0;
border: 1px black dotted;
padding: 20px;
min-height: 100px;
}
.language {
display: flex;
align-items: center;
}
.localization-image {
max-width: 200px;
min-width: 200px;
margin: 0 20px 0 0;
}
#arabic {
direction: rtl;
}
#arabic .ltr {
unicode-bidi: bidi-override;
direction: ltr;
}
#arabic .localization-image {
margin: 0 0 0 20px;
}
.show {
display: initial;
}
.hide {
display: none;
}
img {
border: 0;
max-width: 100%;
height: auto;
width: auto;
}
</style>
</head>
<body>
<div id="localization">
<select name="list" id="list" onchange="updatelocalization()">
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="arabic">Arabic</option>
</select>
<div class="localization-container">
<div id="english" class="show">
<div class="language">
<div class="localization-image"><img src="https://www.openactive.com/sites/images/new-york.jpg"></div>
<div class="text-subcontainer"><span class="localization-text">Open Active specializes in website development, e-commerce, branding, online and social media marketing, search engine optimization and localization for individuals and organizations large and small around the world. We specialize in launching new products on the Shopify plafrom!</span> <span class="localization-contact">Contact us at: +1 (212) 123-4567.</span></div>
</div>
</div>
<div id="spanish" class="hide">
<div class="language">
<div class="localization-image"><img src="https://www.openactive.com/sites/images/mexico-city.jpg"></div>
<div class="text-subcontainer"><span class="localization-text">Open Active se especializa en desarrollo de sitios web, comercio electrónico, desarrollo de marcas, marketing en línea y en redes sociales, posicionamiento en buscadores, así como localización para individuos y organizaciones grandes y pequeñas en todo el mundo. ¡Nos especializamos en lanzar nuevos productos en la plataforma de Shopify!</span> <span class="localization-contact">Comuníquese con nosotros al: +52 55 12 34 56 78.</span></div>
</div>
</div>
<div id="arabic" class="hide">
<div class="language">
<div class="localization-image"><img src="https://www.openactive.com/sites/images/dubai.jpg"></div>
<div class="text-subcontainer"><span class="localization-text">Open Active هي شركة متخصصة في تطوير مواقع الويب، والتجارة الإلكترونية، وتصميم العلامات التجارية، والتسويق عبر الإنترنت ومواقع التواصل الاجتماعي، وتحسين محركات البحث، والترجمة التي تتسم بالطابع المحلي للأفراد والمؤسسات الكبيرة والصغيرة في جميع أنحاء العالم، ونحن نتخصص في إطلاق المنتجات الجديدة على منصات Shopify.</span> <span class="localization-contact">تواصل معنا على</span>: <span class="ltr">+ (212) 537-4042</span>.</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function updatelocalization(){
hideall();
var selected =document.getElementById("list").value;
document.getElementById(selected).classList.remove("hide");
document.getElementById(selected).classList.add("show");
}
function hideall()
{
document.getElementById("english").classList.remove("show");
document.getElementById("spanish").classList.remove("show");
document.getElementById("arabic").classList.remove("show");
document.getElementById("english").classList.add("hide");
document.getElementById("spanish").classList.add("hide");
document.getElementById("arabic").classList.add("hide");
}
</script>
</body>
</html>
