Aufklappfeld Bedienung

[KC]

Hi Leute,

habe eine Seite wo die Auswahlfelder (siehe Screenshots) enthalten sind. Beim neu Laden der Seite wird das oberste Auswahlfeld automatisch aufgeklappt angezeigt (IST Bild). Das andere Aufklappfeld ist geschlossen (SOLL).

Ich möchte das alle geschlossen sind und nur wenn der Besucher die öffnet.

Im Code ist folgendes:

<button type="button" class="flex items-center bg-white border-b" data-accordion-target="#accordion-flush-body-1" aria-expanded="false" aria-controls="accordion-flush-body-1" style="color: #000;">

Habe den verdächtigen Eintrag fett markiert. Wenn ich alle auf 'false' setze, ändert sich nichts. Wenn ich die Reihenfolge der Aufklappfelder ändere, indem ich von false auf true setze, dann verändert sich das schon. Habe ich einen Denkfehler oder was ist hier los?

[Matthias Scharwies]

Servus!

Hi Leute,

habe eine Seite wo die Auswahlfelder (siehe Screenshots) enthalten sind. Beim neu Laden der Seite wird das oberste Auswahlfeld automatisch aufgeklappt angezeigt (IST Bild). Das andere Aufklappfeld ist geschlossen (SOLL).

Ich möchte das alle geschlossen sind und nur wenn der Besucher die öffnet.

Habe ich einen Denkfehler oder was ist hier los?

Nimm das native dialog-Element, das von allen Browsern unterstützt wird.

• HTML/Tutorials/dialog

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo KC,

ohne genauere Kenntnis deiner Seite und der verwendeten JavaScript-Libraries lässt sich da nicht viel sagen. Es ist ein Button, der tut von sich aus nichts. Erst JavaScript bringt ihn zum Leben.

aria-expanded tut von sich aus auch nichts, es sei denn, Du hast CSS geschrieben, das darauf reagiert. Ansonsten haben aria-Attribute auf die visuelle Darstellung keinen Einfluss, die dienen primär dazu, Assistenztechniken über die Bedeutung von Inhalten zu informieren.

Matthias' Hinweis auf das Dialog-Element bezieht sich auf Popup-Dialoge; damit erreichst Du keine Aufklapp-Darstellung.

Vielleicht eher das details-Element, da muss man dann aber noch etwas feilen, wenn man die Pfeile exakt so darstellen will wie Du sie hast. Weiß nicht, ob sich das soweit verbiegen lässt.

Rolf

[Matthias Scharwies]

Servus!

Hallo KC,

ohne genauere Kenntnis deiner Seite und der verwendeten JavaScript-Libraries lässt sich da nicht viel sagen. Es ist ein Button, der tut von sich aus nichts. Erst JavaScript bringt ihn zum Leben.

aria-expanded tut von sich aus auch nichts, es sei denn, Du hast CSS geschrieben, das darauf reagiert. Ansonsten haben aria-Attribute auf die visuelle Darstellung keinen Einfluss, die dienen primär dazu, Assistenztechniken über die Bedeutung von Inhalten zu informieren.

Matthias' Hinweis auf das Dialog-Element bezieht sich auf Popup-Dialoge; damit erreichst Du keine Aufklapp-Darstellung.

Vielleicht eher das details-Element, da muss man dann aber noch etwas feilen, wenn man die Pfeile exakt so darstellen will wie Du sie hast. Weiß nicht, ob sich das soweit verbiegen lässt.

Mist ja: HTML/Tutorials/details

Es geht doch nicht um die Pfeile, sondern um die Funktionalität im Browser.

Die Pfeile, bzw. die gewünschte Darstellung, kann man dann mit CSS erreichen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Mist ja: HTML/Tutorials/details

Ja, Mist. Why <details> is Not an Accordion

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Mist ja: HTML/Tutorials/details

Ja, Mist. Why <details> is Not an Accordion

Das ist so 2019! und das hatten wir schon!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Gunnar,

Ja. Aber was ist denn dann ein Akkordion?

Dies?

Rolf

[KC]

Bei diesen Aufklappfeldern herrscht kein JavaScript, scheint rein CSS zu sein

[Rolf B]

Hallo KC,

keine Ahnung, was da scheint. Solange ich es nicht sehe und auseinander nehmen kann, kann ich nichts dazu sagen.

Rolf

[Gunnar Bittersmann]

@@KC

Bei diesen Aufklappfeldern herrscht kein JavaScript, scheint rein CSS zu sein

Aber bei den Buttons. Die wechseln ja ihren aria-expanded-Status von "false" auf "true" und andersrum – mit JavaScript.

Was dann ohne weiteres JavaScript, sondern mit reinem CSS geht, ist das Auf- und Zuklappen der jeweils auf die Buttons folgenden Elemente:

[aria-expanded="false"] + * { display: none }

Siehe Collapsible Sections auf Inclusive Components.

🖖 Живіть довго і процвітайте

[MudGuard]

Hi,

Aber bei den Buttons. Die wechseln ja ihren aria-expanded-Status von "false" auf "true" und andersrum – mit JavaScript.

Aber warum ändert sich der aria-expanded-Status des Buttons? Der Button ist doch nicht "expanded", der ist noch genauso groß wie vorher.

Der aria-expanded-Status müßte sich doch bei dem zu- bzw. aufgeklappten Element (div, section oder was auch immer das sein mag).

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Aber bei den Buttons. Die wechseln ja ihren aria-expanded-Status von "false" auf "true" und andersrum – mit JavaScript.

Aber warum ändert sich der aria-expanded-Status des Buttons? Der Button ist doch nicht "expanded", der ist noch genauso groß wie vorher.

Der aria-expanded-Status müßte sich doch bei dem zu- bzw. aufgeklappten Element (div, section oder was auch immer das sein mag).

Steht doch im verlinkten Artikel unter State:

“Some make the mistake of placing aria-expanded on the target element rather than the control itself. This is understandable since it is the content that actually switches state. But, if you think about it, this wouldn't be any good: the user would have to find the expanded content — which is only possible if it's actually expanded! — and then look around for an element that might control it. State is, therefore, communicated through the control that one uses to switch it.”

Für das zugeklappte Element könnte man statt [aria-expanded="false"] + * { display: none } auch das HTML-Attribut hidden setzen – und hätte dann fürs Umschalten eine Zeile JavaScript mehr.

🖖 Живіть довго і процвітайте