JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<script src=" //cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div class="newboxes" id="newboxes1">LANGUAGE 1 TEXT</div>
<div class="newboxes" id="newboxes2">LANGUAGE 2 TEXT</div>
<div class="newboxes" id="newboxes3">LANGUAGE 3 TEXT</div>

<a class="language-toggle" id="myHeader1" href="#" class="button" title="LANGUAGE 1" data-language="newboxes1"> LANGUAGE 1<br /></a>
<a class="language-toggle" id="myHeader2"href="#" class="button" title="LANGUAGE 2" data-language="newboxes2"> LANGUAGE 2<br /></a>
<a class="language-toggle" id="myHeader3" href="#" class="button" title="LANGUAGE 3" data-language="newboxes3">LANGUAGE 3<br /></a>

CSS

.newboxes {
    display: none;
}

.active {
    color: red;
    text-decoration: none;
}

JavaScript

// Shortcut for $(document).ready()
$( function() {
    
    function showOnlyOne( theChosenOne ) {

        // Hide all boxes before showing the right one
        $('.newboxes').hide();
        $('#' + theChosenOne ).show();

        // Store the cookie
        $.cookie.set("thechosenone", theChosenOne, { expires: 365 } ); 
    }
    
    // Get the cookie and make sure it's a usable value
    var theChosenOneCookie = $.cookie.get( 'thechosenone' );
    if( theChosenOneCookie !== 'newboxes1' || theChosenOneCookie !== 'newboxes2' || theChosenOneCookie !== 'newboxes3' ) {
        theChosenOneCookie = 'newboxes1';
    }
    
    showOnlyOne( theChosenOneCookie );
    
    // Click handler for language toggles
    $('.button').on('click', function( e ) {
        // Store what button was clicked
        var $trigger = $(this);
        showOnlyOne( $trigger.data('language') );
    });
    
});