Untitled

/** Empezando con la configuración del HTML, supongamos algo así:

<!DOCTYPE html>


/** El <html> viene por defecto con la propiedad lang="en", o sea, lenguaje en inglés, yo lo dejo vacío*.
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    /** Hay que agregar la siguiente linea de código para agregar la librería de JQuery a tu proyecto
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

    /** Dentro del elemento que queramos traducir, tenemos que tener una versión en cada lenguaje que queramos, 
    /** y ponerle la propiedad 'lang' con valor 'en' (inglés), o 'es' (español)
    <div>
        <p lang="en">Hello</p>
        <p lang="es">Hola</p>
    </div>

    /** Creamos un botón para traducir
    <button id="switch-lang">Translate</button>

</body>
</html>

<script>

$(function(){

    /**Esta linea hace que por defecto se oculten los elementos en español, se puede hacer a la inversa también
    $('[lang="es"]').hide();

    /**Al hacer click en el botón de traducir, se va a intercambiar entre los elementos con la propiedad lang 
    /**que sean visibles al momento

    $("#switch-lang").click(function(){
        $('[lang="en"], [lang="es"]').toggle();
    });

});

</script>

/**Dejo una nota acá sobre la propiedad 'lang' del <html>, como viene por defecto como lang='en', si ponés el botón de 
/** traducir, al ocultar los elementos que tengan lang='en' al traducir, si no le sacás la propiedad a la tag <html>
/** se te va a ocultar toda la visualización de la página,
Editor is loading...