Akkordeon oder Klappboxen (Texte ein- und ausklappen)
Nur per CSS und komplett ohne Javascript

Das CSS-Akkordeon im Standard-Layout

Mit einem Klick auf eine der Überschriften zeigt sich der Inhalt zu ihr.



Der erste Akkordeon-Inhalt: Das Gridelement im Backend

Hier ist der Accordion-Effekt mit der TYPO3-Extension "gridelements" (Abk. GE) erstellt, ohne Javascript, nur per CSS.

Der Nachteil hierbei ist der, dass man nur ein Akkordeon oder nur eine Klappbox je Seite einsetzen kann, einfach wegen der "allgemeinen" Klassen. Mit Javascript kann man sich auf die individuellen IDs des Inhaltselements beziehen.

Ein Screenshot des GE aus dem TYPO3-Backend sehen Sie unten:

css-akkordeon-01b

Nach oben

Nach oben



Nicht Akkordeon, sondern die Klappbox (nur ein Screenshot mit Layout Typ 2)

Wenn man im Backend den Haken der Grid-Eigenschaften (siehe Abb. im ersten Register), dann sind alle Register zu öffnen (Klappbox). D.h., beim Öffnen eines Registers schließt sich das schon Geöffnete nicht automatisch.

Eine Abb. wie so etwas aussieht sehen Sie in u.a. Abbildung:

css-akkordeon-02

Nach oben

Nach oben



Der 3. und auch der letzte Text mit einem Bild

In rutrum, tortor id varius porttitor, velit velit dictum turpis, vel sollicitudin erat nunc semper metus. Nulla quis justo vulputate, pulvinar lorem ut, tempus nisl. Curabitur feugiat, massa vitae cursus suscipit, dolor velit rhoncus turpis, nec placerat leo leo non dui. Aenean dictum dolor semper lacus porta, at viverra lorem sodales. Nullam nec urna cursus, finibus metus scelerisque, semper metus. Phasellus non justo purus. Nullam et molestie metus. Nulla vitae est vitae ex porttitor cursus eu vitae massa. Vestibulum luctus felis sed nunc vulputate dictum. Phasellus eu pellentesque tortor, quis laoreet nunc.

lanzarote01 q70

Nach oben

Nach oben

Ein Akkordeon im "Akkordeon Layout 2"mit "Anleser" (die ersten x Zeichen des Inhaltstextes)



Der erste Akkordeon-Inhalt

In diesem Fall ist der Accordion-Effekt eine ausschließlich mit CSS umgesetzte Textanimation und wird auf Webseiten immer populärer und interessanter. Es kann zum Beispiel per Klick auf eine Überschrift ein ausführlicher Text ein- oder ausgeblendet werden.
Der Effekt bietet eine interessante Optik und sorgt für optischen Platz auf einer Webseite.

Was soll der Accordion-Effekt auf diesen Seiten können?
  • Beim Aufruf der Seite sollen zuerst alle Texte eingeklappt sein (Auswahl).
  • Entscheiden ob die geöffneten Register bei der Anwahl eines anderen geschlossen werden oder geöffnet bleiben (Akkorrdeon oder Klappbox).
  • Es ist absolut verwirrend wenn ein Text, der über die Bildschirmseite hinausgeht, geöffnet ist und der Besucher einen anderen Text weiter unten auf der Seite öffnen möchte. Durch das automatische Schließen des ersten Textes macht die Seite einen Sprung nach oben und der Bediener verliert die Orientierung.


Der zweite Inhalt

Proin vel ex eget felis pretium malesuada. Aliquam luctus sapien tellus, non cursus risus maximus at. Curabitur id diam et dolor aliquam dignissim eu ac est. Vivamus venenatis nisl sit amet turpis vehicula, convallis dictum urna blandit. Aenean maximus; ligula ac euismod feugiat, tellus nunc viverra eros, ac pharetra tellus quam porttitor turpis. Phasellus vitae elit ac turpis vehicula dictum sed ut quam. Cras id diam eleifend, pulvinar est eget, molestie nulla! Proin eget eros eu arcu dictum molestie nec quis orci. Aliquam eu sem at augue aliquam vehicula eget at urna. Nunc molestie elit lorem, venenatis gravida lorem mollis eget? Fusce mollis, sem non pulvinar volutpat, libero turpis cursus velit, et viverra nunc neque sed leo.



Der 3. und auch der letzte Text mit einem Bild

lanzarote01 q70

In rutrum, tortor id varius porttitor, velit velit dictum turpis, vel sollicitudin erat nunc semper metus. Nulla quis justo vulputate, pulvinar lorem ut, tempus nisl. Curabitur feugiat, massa vitae cursus suscipit, dolor velit rhoncus turpis, nec placerat leo leo non dui. Aenean dictum dolor semper lacus porta, at viverra lorem sodales. Nullam nec urna cursus, finibus metus scelerisque, semper metus. Phasellus non justo purus. Nullam et molestie metus. Nulla vitae est vitae ex porttitor cursus eu vitae massa. Vestibulum luctus felis sed nunc vulputate dictum. Phasellus eu pellentesque tortor, quis laoreet nunc.

Die Klapp-Register (fold-out)Hier schließt sich das geöffnete Register nicht automatisch, wenn ein anderes geöffnet wird.



Der erste Akkordeon-Inhalt

Der Accordion-Effekt ist eine mit JavaScript umgesetzte Textanimation und wird auf Webseiten immer populärer und interessanter. Es kann zum Beispiel per Klick auf eine Überschrift ein ausführlicher Text ein- oder ausgeblendet werden.
Der Effekt bietet eine interessante Optik und sorgt für optischen Platz auf einer Webseite.

Was soll der Accordion-Effekt auf diesen Seiten können?
  • Dass beim Aufruf der Seite zuerst alle Texte eingeklappt sind.
  • Die Texte auch mit ausgeschaltetem JavaScript lesbar sind, das heißt die Texte sind dann ausgeklappt.
  • Dass der Bediener mehrere Texte gleichzeitig geöffnet haben kann. Es ist absolut verwirrend wenn ein Text, der über die Bildschirmseite hinausgeht, geöffnet ist und der Besucher einen anderen Text weiter unten auf der Seite öffnen möchte. Durch das automatische Schließen des ersten Textes macht die Seite einen Sprung nach oben und der Bediener verliert die Orientierung.


Der zweite Inhalt

Proin vel ex eget felis pretium malesuada. Aliquam luctus sapien tellus, non cursus risus maximus at. Curabitur id diam et dolor aliquam dignissim eu ac est. Vivamus venenatis nisl sit amet turpis vehicula, convallis dictum urna blandit. Aenean maximus; ligula ac euismod feugiat, tellus nunc viverra eros, ac pharetra tellus quam porttitor turpis. Phasellus vitae elit ac turpis vehicula dictum sed ut quam. Cras id diam eleifend, pulvinar est eget, molestie nulla! Proin eget eros eu arcu dictum molestie nec quis orci. Aliquam eu sem at augue aliquam vehicula eget at urna. Nunc molestie elit lorem, venenatis gravida lorem mollis eget? Fusce mollis, sem non pulvinar volutpat, libero turpis cursus velit, et viverra nunc neque sed leo.



Der 3. und auch der letzte Text mit einem Bild

lanzarote01 q70

In rutrum, tortor id varius porttitor, velit velit dictum turpis, vel sollicitudin erat nunc semper metus. Nulla quis justo vulputate, pulvinar lorem ut, tempus nisl. Curabitur feugiat, massa vitae cursus suscipit, dolor velit rhoncus turpis, nec placerat leo leo non dui. Aenean dictum dolor semper lacus porta, at viverra lorem sodales. Nullam nec urna cursus, finibus metus scelerisque, semper metus. Phasellus non justo purus. Nullam et molestie metus. Nulla vitae est vitae ex porttitor cursus eu vitae massa. Vestibulum luctus felis sed nunc vulputate dictum. Phasellus eu pellentesque tortor, quis laoreet nunc.

kupix webdesign — cookies

Allgemein Cookies

Mehr über die genutzten Cookies erfahren