Text mit FlipFlop-Schalter Ersetzen

horstmann · 09.09.2020

Hallo ,
wie soll richtig machen, so das bei Umschalten der text von DE auf Englisch Ersetzt wird ?
https://drive.google.com/file/d/18hLHU6uDVkmxYzJfA0k992WUB0Q-dNDr/view?usp=sharing

das ist der Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<main>
<div class="toggle text">
<label> Language DE or EN
<input type="checkbox"> <span class="slider"></span> </label>
</div>
<div class="sp-de">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores consectetur
corporis cupiditate eligendi facilis iure, laudantium nisi obcaecati officia quasi quia
quisquam saepe suscipit tempora, velit vitae? Commodi, ducimus.</h2>
</div>
<div class="sp-en">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores consectetur
corporis cupiditate eligendi facilis iure, laudantium nisi obcaecati officia quasi quia
quisquam saepe suscipit tempora, velit vitae? Commodi, ducimus.</h2>
</div>
</main>
</section>

</body>
</html>

h2 {
width: 600px;
}
section {
margin: 0 auto;
}
main {
background: white;
}

.toggle label {
position: relative;
display: inline-block;
width: 10em;
height: 3.5em;
}

.toggle input {
display: none;
}

.toggle .slider {
/* Grundfläche */

position: absolute;
cursor: pointer;
top: 1.5em;
left: 2em;
width: 4em;
height: 2em;
background-color: #000000;
/* red */

transition: all .3s ease-in-out;
border-radius: 1em;
}

.toggle .slider:before {
/* verschiebbarer Button */

position: absolute;
content: "";
height: 1.6em;
width: 1.6em;
left: 0.2em;
bottom: 0.2em;
background-color: white;
border-radius: 50%;
transition: all .3s ease-in-out;
}

.toggle input:checked + .slider {
background-color: #5a9900;
/* green */
}

.toggle input:checked + .slider:before {
-webkit-transform: translateX(1.9em);
/* Android 4 */

-ms-transform: translateX(1.9em);
/* IE9 */

transform: translateX(1.9em);
}

.text .slider:after {
/* Text vor dem FlipFlop-Schalter */

position: absolute;
content: "DE";
color: #000000;
font-weight: bold;
height: 1.6em;
left: -2.5em;
bottom: 0.2em;
}

.text input:checked + .slider:after {
/* Text hinter dem FlipFlop-Schalter */

position: absolute;
content: "EN";
color: #5a9900;
left: 4.5em;
}
.sp-en{

}
.sp-de{

}