html title in bilingual site

Question

Based on the code in this post and thanks to the help I received on this other post I managed to use two languages in a html site; this is the code that I use in the navbar to select the language:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span lang="es">Idioma</span>
        <span lang="en">Language</span>
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown06">
        <a class="dropdown-item coll-navbar language">
            <span lang="es">English</span>
            <span lang="en">Español</span>
        </a>
    </div>
</li>

This is the jQuery code:

var lang = localStorage.getItem("lang");
if (lang) {
    if (lang == "en") {
        $('[lang="en"]').show();
        $('[lang="es"]').hide();
    } else {
        $('[lang="es"]').show();
        $('[lang="en"]').hide();
    }
} else {
    $('[lang="en"]').hide();
    localStorage.setItem('lang', 'es');
};
$('.language').click(function() {
    $('[lang="es"]').toggle();
    $('[lang="en"]').toggle();
    if (lang === 'en') {
        localStorage.setItem('lang', 'es');
    } else {
        localStorage.setItem('lang', 'en');
    }
});

And, finally, this is the code working:

<div class="title col-12 col-md-8">
    <h2 class="align-center" lang="es"><strong>
            Costura</strong></h2>
    <h2 class="align-center" lang="en"><strong>
            Sewing</strong></h2>
</div>

The site starts in spanish and, if english is selected, it will start with english the next time the site is visited from the same browser (it will start in the last selected language).

I want to change the language in the title along with the text in the body, and, as recommended in this post, I already tried to use document.title = "new title" inside the jQuery bit, but for some reason the title stays the same, it just changes one time and then stays the same for the rest of the session. Thanks in advance,

score 0 · Answer 1 · answered Nov 07 '20 at 02:10

0

Why are you not simply using CSS?

html [lang] { display: none; }
html[lang=en] [lang=en] { display: initial; }
html[lang=es] [lang=es] { display: initial; }

answered Nov 07 '20 at 02:10

connexo

41,035
12
60
87

Thank you, just, how would this help me to change the title?, and, in any case, this could work instead of the jquery, isn't it? – Jerardo Nov 07 '20 at 15:57

html title in bilingual site

1 Answers1