CSS + HTML only Accordion Element
- Adaption für Jimdo-Webseiten
Quelle: https://codepen.io/abergin/pen/ihlDf
Jimdo-Adaption (html-Widget)
Das folgende Element ist eine per CSS angepasste Adaption des Quellcodes von https://codepen.io/abergin/pen/ihlDf in einem Jimdo html-Widget-Element
CSS + HTML only
Accordion Element
-
Languages Used
This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain 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.
Akkordeon für Jimdo Standard-Elemente
Die folgenden Beispiele sind Adaptionen der CSS + HTML only Accordion Element Methode von https://codepen.io/abergin/pen/ihlDf auf Jimdo Standard-Elemente
-
Jimdo Standard Formular-Element
content1
Test-Formular
append Element above to content1
clear Akkordeon
-
Jimdo Standard Bild-Element
content2
append Element above to content2
-
Jimdo Spaltenelement mit Text und Bildern
content3
Lorem ipsum dolor sit amet, ullum nullam es possim sed et. Virtute ancillae mel ne, quo ean adhuc del principes persequeris, ius alii pro priae maxima accommodare ea. Zril aliquam fabulas mei in. Epicurei adipisci pro ex, vidisse minimum volupta ius eu vero eos et accusam et justo duo dolores.
Eros quaestio explicari ut per. No quo amet necessitatibus, sit ei putent appetere. Lobortis urbanitas efficiantur ut has. Has at modus nemore prodesset. Eleifend abhorreant ullamcorper per cu. Sea vide graeco possim.
append Element above to content3
Bearbeitungsmodus / Kompatibilität mit Jimdo-Funktionalität
Das Akkordeon Widget lässt sich mit allen CSS-Elementen des aktuellen Jimdo-Designs verknüpfen. So können z.B. die Einstellungen für Jimdo-Buttons auf die html-Überschriften des Akkordeons übertragen werden.
Im Bearbeitungsmodus sind alle Akkordeon-Elemente aufgeklappt und vollständig sichtbar. Alle Jimdo Bearbeitungsfunktionen bleiben erhalten.
Beispiel: Klick auf Button!
-
Ansicht
content4
Bearbeitungsmodus
append Element above to content4
Neu: Responsive Akkordeon-Buttons (Auslöser)
aus Jimdo-Standardelementen
Neues Widget: Mit unserer aktuellen Adaption ist es jetzt auch möglich, Jimdo-Standard-Elemente als Auslöser (Button) für das Akkordeon zu nutzen, die sich jeder Bildsschirmbreite automatisch anpassen:
Beispiel:
Auslöser für Akkordeon (Button)
Beschreibung
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
append element above to button
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 et justo duo dolores et ea rebum.
append element above to content
Elemente unter einem Akkordeon-Element
...müssen ggf. auf die gleiche z-index-Ebene des Akkordeons angehoben werden. Sie werden sonst zwar dargestellt, sind aber u.U. ohne Funktion
clear Akkordeon