Toggle language between divs

Question

I'm working on a simple page with 8 different languages, it's just a simple onepager.

All the text in the different languages are set in divs with a style="display:none" to be hidden, until the language is choosen then the div with that particular language is shown.

Currently the main language is English and that div is shown on pageload but when selecting a language will load the div UNDER the english div, but this need to be replaced.

I'm not good in Javascript, but found some codes here which I implemented, but it's still not working as it should be.

This is the JS code:

<script type="text/javascript">

    var _hidediv = null;
    function toggle_visibility(id) {
        if(_hidediv)
            _hidediv();
        var div = document.getElementById(id);
        div.style.display = 'block';
        _hidediv = function () { div.style.display = 'none'; };
    }

</script> 

and in my language selector I've the following as example:

<a href="#english" onclick="toggle_visibility('english');">EN</a> | <a href="#spanish" onclick="toggle_visibility('spanish');">ES</a> | <a href="#swedish" onclick="toggle_visibility('swedish');">SV</a> 

What am I doing wrong here, the default language is english, so the div is as follows: and the other languages have style="display:none"

  <div id="english" style="display:block">

Answer 1

How about using CSS to hide/show the divs and only use js/jQuery to change a class on body or any parent element?

 $('button').click(function() { $('#body').removeClass().addClass($(this).data('lang')); });

 .lang { display: none; } #body.en .en { display: block; } #body.es .es { display: block; } #body.de .de { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="body" class="en"> <button data-lang="en">English</button> <button data-lang="es">Spanish</button> <button data-lang="de">German</button> <div class="lang en">English</div> <div class="lang es">Spanish</div> <div class="lang de">German</div> <br/> <div class="lang en">English 2</div> <div class="lang es">Spanish 2</div> <div class="lang de">German 2</div> </div>

Answer 2

A jQuery-based solution would work like in this example: https://codepen.io/shikifujin/pen/PowqOjB

You create CSS-classes for .language (hidden by default) and .language.active (visible):

div.language {
  display: none;
}

div.language.active {
  display: block;
}

Then, create all language divs with content like so (only the default one is given the active class) with the id= property containing the content's language :

  <div id="english" class="language active">
    english content
  </div>
  <div id="spanish" class="language">
    contenido en español
  </div>

Then you need to have jQuery sourced in your document, as well as the <script> below to make the language switching work. Once the DOM is loaded, all .switch-language elements (they do not need to benecessarily) need to have the id= attribute specify the language to switch to (exactly matching the id of the corresponding div):

  <a href="#" id="english" class="switch-language">EN</a>

Once the entire DOM is loaded, or after the content and switching elements are present, you can enable the switcher by handling each click on any of them with the following actions:

• get language to switch to from id ( switchTo )
• hide all content divs
• show the desired one (with id switchTo ) This can be done with vanilla javascript, too, but I chose to use jQuery:

<script>
$(document).ready(function() {
  $(".switch-language").on("click", function() {
    var switchTo = $(this).data("language");
    $(".language").hide();
    $(".language#" + switchTo).show();
  });
});
</script>

Again, you may try it out here: https://codepen.io/shikifujin/pen/PowqOjB

Answer 3

You need to handle the default case of English language also. Only that's missing.

 var _hidediv = null; function toggle_visibility(id) { if(_hidediv) { _hidediv(); } else { document.getElementById('english').style.display = 'none'; } var div = document.getElementById(id); div.style.display = 'block'; _hidediv = function () { div.style.display = 'none'; }; }

 Language: <a href="#english" onclick="toggle_visibility('english')">English</a> <a href="#spanish" onclick="toggle_visibility('spanish')">Spanish</a> <a href="#hindi" onclick="toggle_visibility('hindi')">Hindi</a> <a href="#french" onclick="toggle_visibility('french')">French</a> <div id="content"> <div id="english"> English </div> <div id="spanish" style="display: none;"> Spanish </div> <div id="hindi" style="display: none;"> Hindi </div> <div id="french" style="display: none;"> French </div> </div>

Answer 4

Problems in your code

• _hidediv will never fire because it is always null.
• Logic you used in _hidediv is wrong. It is supposed to set div.style.display = 'none' to other divs than the div you passing as parameter in 'toggle_visibility(id)'. According to your code, even if you manage to fire your _hidediv function, it will reset your target div from div.style.display = 'block' to div.style.display = 'none'.