CSS Language Switcher (using the :checked-Hack) ✤✤✤

Hallo zusammen :)
Das Ziel des heutigen Tutorials könnt ihr gleich in diesem Post sehen. Es geht darum die Sprache mithilfe eines Buttons zu wechseln.
Ich wurde gefragt, wie man das denn machen kann. Anfangs wollte ich mit JavaScript dahinter, hab mich dann allerdings für den :checked-Hack entschieden, der auf das Script verzichtet und einen alles mit CSS lösen lässt.
Ich find die Idee eigentlich ganz sauber, ist wahrscheinlich angenehmer zu als beides parallel, ich werde das also wahrscheinlich jetzt für den Tutorialteil mal beibehalten. Gebt mir Bescheid, ob ihr's so besser findet.

Hey there :)
The result of the tutorial of today can be seen in this post. It's about changing the language with a button.
I was asked how this can be achieved. At the beginning I wanted to go with jQuery, but then I decided to go with the :checked-Hack, which does not require javascript and actually works with CSS only.
I like the idea for it's "cleanness" in the result, since it's probably more comfortable to read, so I may keep the idea. Tell me if you like it better like this.

English Deutsch

Script Idee

Die Grundidee, die ich hatte, war es ein Script zu schreiben, das ähnlich funktioniert, wie mein ausklappbarer Container (erstes JS-Tut, das ich je geschrieben habe), nur mit einem etwas schöneren Effekt und einem simpleren Script, das in etwa so aussah:

Script Idea

The first idea I had was to write a script that opened a container when a button was pressed, including a pretty effect,which looked something like this:

See the Pen Swing Hide and Reveal by Myri (@bekreatief) on CodePen.

HTML

Aber dann schrieb ich für die Arbeit ein Framework mit Tabs und dachte, dass ich das eigentlich auch für dieses Problem verwenden könnte. Was wir eigentlich machen, ist, zwei Radio-Buttons zu verwenden. Sobald der eine Radio-Button ausgewählt ist, machen wir den Inhalt in der einen Sprache sichtbar und blenden den anderen aus und das selbe machen wir dann noch umgekehrt. Dem Radio-Button geben wir ein Label, welches dann zu unserem Schalter wird.

But then I was writing a framework with tabs using the :checked-hack and I though that I could use it for this problem. What we basically do is use radio-buttons. When A radiobutton is checked, we will display the content in the language we want and hide the other language, and the other way round. We add a label to our radiobutton which will become our toggle.

Für die Radio-Buttons verwenden wir IDs, sie sind unsere klar identifizierten Toggles, wenn wir den Inhalt in Container packen, verwenden wir Klassen, da wir den Content aufteilen können in mehrere Container. Das macht dann Sinn, wenn man zum Beispiel Bilder verwendet. Schliesslich wollen wir die nicht zwei Mal einbinden müssen, sondern nur einmal.

We use IDs for the buttons, because there are only gonna be these two. For the content containers we will use classes, because we can split the content into multiple containers. This makes sense if we use for example images. They will be needed for both languages and we don't want to put them in twice.

Toggling

Nachdem wir das haben, fügen wir das ganze toggling ein. Wenn ihr euch das iframe unten anseht, könnt ihr sehen, dass es im Grunde funktioniert. Klickt ihr auf Englisch, wird der engliche Container angezeigt, klickt ihr auf Deutsch, zeigt es euch den deutschen an.
Das ganze ist natürlich noch nicht wirklich ansprechend, und deswegen muss es noch gestyled werden.

After that we add the functionality. If you take a look at the iframe below, you can see that the effect works. if you click on English the english container opens up and if you click on Deutsch the german one opens up. Still it is not really appealing yet, so we need to add some more CSS.

CSS

Ich hab euch zwei fertige Beispiele gebaut. Einmal haben wir ein Beispiel ohne Schnickschnack, einfach mit Style. Dazwischen ein Bild eingebaut, damit ihr sehen könnt, dass es mit mehreren containern funktioniert. Beim zweiten habe ich noch einen fade-In-Effekt für euch. Das ist mit animate.css gemacht und funktioniert einwandfrei in jedem Browser ausser meinem geliebten Firefox, der streikt (sogar Safari und IE kriegens hin!) Aber ich find den Effekt ganz schön.
Und dann habt ihr es geschafft. Eine Sprachsteuerung ganz mit CSS :D

I have two finished examples for you. One just a "plain" one with just element styling, using an image so you can see it does work with multiple content containers. and then I did a second one with a fade effect, using animate.css. This does work on every browser (even Safari and IE!) but on Firefox. It only loads my animation at the start and not when toggling. But I still like the effect and wanted to share it with you.
And then you did it. A language Switcher wit CSS only.

See the Pen CSS Language Switch (with image) by Myri (@bekreatief) on CodePen.

See the Pen CSS Language Swith (with animation) by Myri (@bekreatief) on CodePen.