How can I show specific texts inside a div by the click of a button?

Question

I have a small text translated in 3 languages. I am looking to show the first text in English, and above the text to show two buttons, one that says French and one that says Italian. And I want once you click on French, to display the text in French, and the same with Italian. This means that I will have three separate divs, one for English, one for French and one for Italian. I only want to show one of them on the page, depending on which button I click. How can I do that? Thanks

Answer 1

    document.querySelector(".btn-eng").addEventListener('click', function () {
        document.querySelector(".eng").classList.add("active");
        document.querySelector(".french").classList.remove("active");
        document.querySelector(".italian").classList.remove("active");
    });
    document.querySelector(".btn-french").addEventListener('click', function () {
        document.querySelector(".french").classList.add("active");
        document.querySelector(".eng").classList.remove("active");
        document.querySelector(".italian").classList.remove("active");
    });
    document.querySelector(".btn-italian").addEventListener('click', function () {
        document.querySelector(".italian").classList.add("active");
        document.querySelector(".eng").classList.remove("active");
        document.querySelector(".french").classList.remove("active");
    });

*{
    font-size: 1rem;
 }
 .container {
              margin: auto;
              height: 100px;
              width: 250px;
 }
 .flex {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         height: 100%;
         width: 100%;
 }
 .eng,
 .french,
 .italian {
            display: none;
 }
 .active {
           display: block;
 }

<div class="container">
        <div class="flex">
            <div class="section">
                <p class="eng active">Hello Developers out there!</p>
                <p class="french">Bonjour les développeurs là-bas!</p>
                <p class="italian">Ciao sviluppatori là fuori!</p>
            </div>
            <div class="button">
                <button class="btn-eng">English</button>
                <button class="btn-french">French</button>
                <button class="btn-italian">Italian</button>
            </div>
        </div>
</div>

Answer 2

$(function() {
  $('[data-lang="en"]').addClass('active');
  $('.flag').on('click', function() {
    $('[data-lang]').removeClass('active');
    $('[data-lang="' + $(this).data('lang') + '"]').addClass('active');
  });
});

.flag.active {
  background-color: yellow;
}

.text {
  display: none;
}

.text.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-lang="en" class="flag">English</button>
<button data-lang="fr" class="flag">Français</button>
<button data-lang="it" class="flag">Italiano</button>
<div data-lang="en" class="text">My text in English</div>
<div data-lang="fr" class="text">Mon texte en français</div>
<div data-lang="it" class="text">Il mio testo in italiano</div>

Answer 3

All you need to do is create a relation between button and your desired div, and then show the related div only on click and hide the others, in my code you can increase and decrease the div's, no need to touch the jQuery or CSS code, just add or remove div's from HTML

$(document).ready(function(){
        $('.btnWrapper button').click(function(){
            $('.btnWrapper button').removeClass('active');
            $(this).addClass('active');
            var realtion = $(this).data('relation');
            $('.translatedText>div').removeClass('active');
            $('.translatedText').find('#' + realtion).addClass('active');
        });
        
    });

 .btnWrapper button.active {
            background-color: red;
            color: #fff;
        }
        .translatedText > div {
            display: none;
        }
        .translatedText > div.active {
            display: block;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnWrapper">
        <button class="active" data-relation="eng">English</button>
        <button data-relation="fre">French</button>
        <button data-relation="ita">Italian</button>
    </div>
    <div class="translatedText">
        <div id="eng" class="active">
            I am English's Div
        </div>
        <div id="fre">
            I am French's Div
        </div>
        <div id="ita">
            I am Italian's Div
        </div>
    </div>