<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div class="lang-content">
    <span id="link-toggle-lang" class="lang-toggle">Español</span>
    <span class="material-icons lang-toggle-icon">translate</span>
  </div>

  <h1 id="l_title">Title</h1>

  <div class="body__text">
    <h2 id="l_subtitle">Subtitle</h2>
    <p id="l_text1">some text in english</p>
    <p id="l_text2">aditional text in english</p>
  </div>
</body>
html {
  font-family: 'Roboto', sans-serif;
}

h1 {
  text-align: center;
  padding: 20px 0 20px 0;
}

.body__text {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.lang-content {
  border-bottom: 2px solid lightgray;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  
  display: flex;
  justify-content: flex-end;
  align-items: center;  
}

.lang-toggle {
  color: #385898;
  padding: 20px 10px 20px 0px;
  font-size: small;
  font-weight: 600;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.lang-toggle:hover {
   cursor: pointer;
   text-decoration: underline;
}

.lang-toggle-icon {
   color: #385898;
   padding: 10px 0px 10px 0px;
}
let link_toggle_lang = document.getElementById("link-toggle-lang")

const label_en = {
  l_title: "Title",
  l_subtitle: "Subtitle",
  l_text1: "this is an example text",
  l_text2: "additional text"
}

const label_es = {
  l_title: "Titulo",
  l_subtitle: "Subtitulo",
  l_text1: "este es un texto de ejemplo",
  l_text2: "texto adicional"
}

link_toggle_lang.addEventListener("click", function () {
  let lang = {}
  let myLabels = document.querySelectorAll("[id^='l_']")
  //Define the language flag
  let current_lang = "en"

  //Check the current_lang flag
  current_lang =
    link_toggle_lang.innerHTML.includes("English") === true ? "en" : "es"

  switch (current_lang) {
    case "es":
      link_toggle_lang.innerHTML = "English"
      lang = label_es
      break

    case "en":
      link_toggle_lang.innerHTML = "Español"
      lang = label_en
      break
  }

  for (let i = 0; i < myLabels.length; i++) {
    myLabels[i].innerHTML = lang[myLabels[i].id]
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.