Ich möchte gerne zum Hauptmenü (Navigation)
Ich möchte zum Hauptinhalt der Seite
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht
Logo von kupix webdesign Internet-Agentur
  • Aktuelle Hauptseite:
  • Über uns
    • Wie Sie uns finden
    • Referenzen
      • Ref. Kompaktübersicht
      • Referenzen gruppiert
      • Nicht mehr online
    • Testimonials
    • Unsere Partner
    • Kontakt
    • Angebotsanfrage
    • Einzugsermächtigung
    • Barrierefreiheit
    • Detail-Infos
  • Leistungen
    • Webdesign
      • Betreuung Ihrer Webseiten
      • Web auf'm Smartphone
      • One-Pager
    • Webseiten mieten
    • Webhosting
    • Ihre Geschäftspapiere
    • SKI
      • Fragen
      • Beispiele
      • SKI bestellen
  • TYPO3
    • Über das CMS 'TYPO3'
    • TYPO3–Qualitätskriterien
    • Was kostet TYPO3?
    • TYPO3 für Redakteure
    • TYPO3 Hochrüstung!?
    • TYPO3 Snippets
      • Eigenes Inhaltselement (CType)
      • MASK-Akkordeon
      • MASK-Tabs
      • MASK-Multicolumn
      • Slider über »Dateisammlung«
      • Text&Media–Slider
      • Text&Media Bilder aus Verzeichnis
      • #Gridelements-Akkordeon
      • #Gridelements-Tabs
      • T3 jQuery-Zoomple
      • News-List Mini-Cards
    • TYPO3 Lernvideos
  • Service
    • Support / Fernwartung
    • Was bedeutet CMS?
    • Warum ein CMS!?
    • Das CMS TYPO3
    • E-Mail-Konto einrichten
    • E-Mails sind Postkarten
    • Homepage-Validierung
  • Aktuelle Hauptseite:Designelemente
    • Grids (Rasterelemente)
      • 2-Spalter
      • 3-Spalter
      • 4-Spalter
      • 5-Spalter
    • Boxen
      • Video-Box
      • Boxen nebeneinander
    • Features
      • Akkordeon
      • Aktuelle Hauptseite:Akkordeon CSS
      • Bilder aus Verzeichnis (Thumbs)
      • Bilder aus Verzeichnis (Mauer)
      • Slider mit Hintergrundbildern
      • BX-Slider
      • GE Cards
      • Lupeneffekt
      • Parallax
      • Tabs
      • Timeline / Roadmap (news)
      • Timeline / Roadmap (textmedia)
      • Tabellen sortieren
      • News: Mini-Cards
      • Textarea-Ticker
  • Aktuelles
    • Änderungen
    • News Archiv
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht
kupix Logo
Home » Designelemente » Features » Akkordeon CSS
Designelemente
  • Grids (Rasterelemente)
    • 2-Spalter
    • 3-Spalter
    • 4-Spalter
    • 5-Spalter
  • Boxen
    • Video-Box
    • Boxen nebeneinander
  • Aktuelle Seite:Features
    • Akkordeon
    • Aktuelle Seite:Akkordeon CSS
    • Bilder aus Verzeichnis (Thumbs)
    • Bilder aus Verzeichnis (Mauer)
    • Slider mit Hintergrundbildern
    • BX-Slider
    • GE Cards
    • Lupeneffekt
    • Parallax
    • Tabs
    • Timeline / Roadmap (news)
    • Timeline / Roadmap (textmedia)
    • Tabellen sortieren
    • News: Mini-Cards
    • Textarea-Ticker

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.

Sondermenü
  • Impressum
  • Datenschutz
  • AGB
  • Seitenübersicht
  • Kontakt
  • Support
Kontakt

kupix webdesign
Sternschanze 16, 52428 Jülich

 +49 2461 910 111

 +49 2461 910 112

  +49 173 252 0001

 02461.xxx@keinSpam.910111.de

 Kontaktformular

 

Geschäftszeiten

Sie erreichen uns

am Mo., Di., Mi. und Fr.
 von 10:00 bis 18:00 Uhr

und am Do.
 von 09:00 bis 12:30 Uhr

Zuletzt abgeschlossenes Projekt
Langerweher Tafel ab 01.01.2023

01.01.2023

Langerweher Tafel, ab 2023 im Corporate Design der Tafel Deutschland

Ein Upgrade von TYPO3 V4 auf die aktuellste V11 haben wir am 25. Jan. 2022 durchgezogen!

⇒ mehr

Copyright © 2007 - 2023, kupix webdesign, 52428 Jülich
kupix webdesign — cookies

Allgemein Cookies

Mehr über die genutzten Cookies erfahren