CSS + HTML ONLY ACCORDION
Quelle: https://codepen.io/abergin/pen/BaKVWd
Das hier gezeigte Akkordeon ist eine auf Jimdo angepasste Adaption des oben verlinkten SASS-Akkordeons von Alex Bergin (https://codepen.io/abergin). In der vorliegenden Form ist es noch nicht automatisiert, d.h. momentan funktioniert es noch nicht mit Jimdo-Standard-Elementen. Eine solche Lösung wäre jedoch problemlos nachzurüsten.
-
Languages Used
This html-Widget was written in HTML and CSS.
-
How it Works
Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.
-
Points of Interest
By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.
-
Lorem ipsum dolor sit amet
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-
At vero eos et accusam
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
Sed diam nonumy eirmod tempor
Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
CSS
Stockholm
Mit automatischer Silbentrennung
Hier gibt’s noch nichts zu lesen, aber das kannst du leicht ändern:
- Textfeld anklicken
- deine eigenen Worte reinschreiben
- ...und schon heißt es tschüss, Beispieltext!
Was fällt auf? Die Texte auf dieser Seite wurden teilweise mit Blocksatz (justify) gesetzt und enthalten eine automatische Silbentrennung. Das ist kein Jimdo-Standard, kann aber mit einem kleinen CSS-Eintrag nachgerüstet werden! Sehr empfehlenswert für die Darstellung auf mobilen Endgeräten!
Yippieh! Dein Besucher ist jetzt hier – der erste Schritt ist gemacht. Wie du ihn jetzt auf deiner Seite hältst? Indem du hier fortsetzt, was du im ersten Textblock angefangen hast.
Im ersten Textblock gibt es ja eine kurze, knackige Übersicht. Hier, in diesem Bereich, kannst du jetzt weiter in die Details gehen und wichtige Infos, die oben noch keinen Platz bekommen haben, weiter ausführen.
Wie auch oben gilt: So kurz wie möglich, so lang wie nötig. Man kennt das von sich selbst: Internetnutzer lieben kurz gehaltene und informative Texte sehr; Wiederholungen und Übertreibungen hingegen kommen weniger gut an. Jetzt haben wir aber genug erzählt. Du machst das schon!