JSFiddle - React, Tailwind, and code Playground

by decx

HTML

<div id="lang-choose">
    <button data-lang="en">EN</button>
    <button data-lang="de">DE</button>
    <button data-lang="fr">FR</button>
</div>
<div lang="en">
    <h1>hello</h1>
    <p>im chris</p>
</div>
<div lang="de">
    <h1>hallo</h1>
    <p>ich heiße chris</p>
</div>
<div lang="fr">
    <h1>bonjour</h1>
    <p>je mappele chris</p>
</div>

CSS

html div[lang] {
    display: none;
}
html[lang=de] div[lang=de] {
    display: block;
}
html[lang=en] div[lang=en] {
    display: block;
}
html[lang=fr] div[lang=fr] {
    display: block;
}

JavaScript

// watch the element #lang-choose for clicks on buttons

$('#lang-choose').on('click', 'button', function () {
    $('html').attr('lang', $(this).data('lang') );
});


// jsfiddle preview doesn't have a language attribute on its html tag so for this demo we're setting one

$('html').attr('lang','en');