Praxis-Artikel zu "Akkordeon" (Aufklappmechanismen)

[ted]

Servus zusammen,

da ich mich aktuell mit dem Thema beschäftigen musste habe ich mal einen Artikel zu Aufklappmechanismen angefangen.

Mir gefällt er noch nicht so ganz, aber ich kann nicht wirklich festmachen was mir nicht gefällt. Wenn von euch jemand eine Idee dazu hat bin ich für konstruktive Kritik dankbar.

Wenn mir außerdem jemand einen Tip geben kann wie ich die Höhe einer eingeklappten Box so hinbekomme dass immer nur ein (oder zwei oder drei) Zeilen des Textinhalts angezeigt werden, auch wenn der Textinhalt eine andere Fontgröße hat würde sich der ToTo-Hinweis im Artikel auch erledigen...

MfG, Ted

[Gunnar Bittersmann]

@@ted

Mir gefällt er noch nicht so ganz, aber ich kann nicht wirklich festmachen was mir nicht gefällt. Wenn von euch jemand eine Idee dazu hat bin ich für konstruktive Kritik dankbar.

„Aufklappen durch Überfahren mit der Maus […] Auf Mobilgeräten ist wegen der fehlenden Maus die Verwendung der Pseudoklasse :hover problematisch und kann dazu führen dass eine Anwendung unbedienbar wird!“

Du sagst es. Der ganze Block „Aufklappen durch Überfahren mit der Maus“ kann also ersatzlos weg.

Aber auch das Akkordeon „Mehrstufiges Menü mit Klick“ ist nicht bedienbar. Per Tastatur passiert nichts.

Heydon Pickering hat in seinen ARIA examples auch ein funktionierendes Akkordeon zu bieten.

LLAP 🖖

[Matthias Scharwies]

Servus!

Servus zusammen,

Herzlich willkommen bei Selfhtml!

da ich mich aktuell mit dem Thema beschäftigen musste habe ich mal einen Artikel zu Aufklappmechanismen angefangen.

Ich hatte auch schon mal angefangen, bin aber nicht weit gekommen: http://wiki-test.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Akkordeon

Mir gefällt er noch nicht so ganz, aber ich kann nicht wirklich festmachen was mir nicht gefällt. Wenn von euch jemand eine Idee dazu hat bin ich für konstruktive Kritik dankbar.

• kleinschrittig vorgehen!
• einfache Sprache
• einfache, standardisierte Beispiele

Wenn mir außerdem jemand einen Tip geben kann wie ich die Höhe einer eingeklappten Box so hinbekomme dass immer nur ein (oder zwei oder drei) Zeilen des Textinhalts angezeigt werden, auch wenn der Textinhalt eine andere Fontgröße hat würde sich der ToTo-Hinweis im Artikel auch erledigen...

eine feste Höhe für die Box?

Heydon Pickering hat in seinen ARIA examples auch ein funktionierendes Akkordeon zu bieten.

Erstmal die Funktionsweise erklären, dann würde ich dies als Letztes übernehmen oder auch nur verlinken.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Ich hab meinen Artikel mal in den Benutzerraum verschoben, damit jeder an ihn ran kann: Benutzer:MScharwies/Akkordeon

Der kann ruhig kannibalisiert werden.

Ein Problem habe ich: Warum sind die Links trotz display: block nur im Bereich der Schrift an sich und nicht in der ganzen Breite klickbar?

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Ein Problem habe ich: Warum sind die Links trotz display: block nur im Bereich der Schrift an sich und nicht in der ganzen Breite klickbar?

Da ragen die p-Elemente hinein. Mit margin-top und padding-top = 0 passiert das nicht.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Da ragen die p-Elemente hinein. Mit margin-top und padding-top = 0 passiert das nicht.

Danke + Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Zudem schlage ich vor, nicht width sondern max-width zu animieren. Für die Absätze würde ich nur links und rechts einen Innenabstand vorsehen (Beim letzten schimmern die Ü-Punkte durch) GGf. wäre auch

.akkordeon p {
    transition: max-height 1s ease 1s;
}
.akkordeon p:target {
    transition-delay: 0s;
}

eine Möglichkeit

Bis demnächst
Matthias