Akkordeon wieder schließen ohne sichtbare Checkbox

[PadAmy]

Hallo Gemeinde,

hier konnte ich herausfinden, wie ich ein einfaches Accordeon umsetzen kann. Einige kleine Anpassungen erfüllen meine Bedürfnisse fast vollständig.

Leider schließt sich das Accordeon bei nochmaligem Klick nicht. Das wird durch den Checkbox-Hack gelöst. Allerdings sind die Checkboxen zu sehen - was ich nicht möchte - und ich weiß nicht, wie ich das unterdrücken kann.

Ich bin sicher, dass mir da jemand von euch auf die Sprünge helfen kann.

Herzlichen Dank für eure Zeit.

Beste Grüße, PadAmy

[Matthias Apsel]

Hallo PadAmy,

Allerdings sind die Checkboxen zu sehen - was ich nicht möchte - und ich weiß nicht, wie ich das unterdrücken kann.

Du kannst die Checkboxen einfach ausblenden.

input[type="checkbox"] {
    display: none;
}

Beachte, dass dieses Akkordeon nicht mit der Tastatur bedienbar ist. Es ist deshalb vielleicht gar nicht so gut. Siehe auch https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliches_Akkordeon.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Du kannst die Checkboxen einfach ausblenden.

input[type="checkbox"] {
    display: none;
}

Nein! Eben nicht. Wegen:

Beachte, dass dieses Akkordeon nicht mit der Tastatur bedienbar ist.

Du sagst es. Eine Checkbox, die nicht da ist, kann nicht bedient werden. Mit display: none ist sie nicht mehr da.

Man kann die Checkbox visuell verstecken.

Noch besser ist es, den Checkbox-Hack überhaupt nicht zu verwenden. Kann man den ganzen Unsinn mal aus dem (Nicht-)Tutorial rausnehmen?

LLAP 🖖

[marctrix]

Hej Gunnar,

Kann man den ganzen Unsinn mal aus dem (Nicht-)Tutorial rausnehmen?

Doch, kann man. Registrieren. Anmelden. Bearbeiten! — Am besten durch was besseres ersetzen!

Marc

[Gunnar Bittersmann]

@@marctrix

Kann man den ganzen Unsinn mal aus dem (Nicht-)Tutorial rausnehmen?

Doch, kann man. Registrieren. Anmelden. Bearbeiten! — Am besten durch was besseres ersetzen!

Es gibt bereits den Artikel „zugängliches Akkordeon“, der kann den anderen ersetzen.

Ein Artikel „nicht zugängliches Akkordeon“ sollte im SELFHTML-Raum nicht auftauchen. Auch und gerade nicht, wenn „nicht zugängliches“ nicht dabeisteht.

LLAP 🖖

[marctrix]

Hej Gunnar,

Es gibt bereits den Artikel „zugängliches Akkordeon“, der kann den anderen ersetzen.

Ein Artikel „nicht zugängliches Akkordeon“ sollte im SELFHTML-Raum nicht auftauchen. Auch und gerade nicht, wenn „nicht zugängliches“ nicht dabeisteht.

Macht Sinn! Ich schlage vor den Artikel zu ersetzen durch einen Hinweis auf die Elemente details und summary einerseits und einen Link zum zugänglichen Akkordeon andererseits.

Marc

[Gunnar Bittersmann]

@@marctrix

Es gibt bereits den Artikel „zugängliches Akkordeon“, der kann den anderen ersetzen.

Ein Artikel „nicht zugängliches Akkordeon“ sollte im SELFHTML-Raum nicht auftauchen. Auch und gerade nicht, wenn „nicht zugängliches“ nicht dabeisteht.

Macht Sinn! Ich schlage vor den Artikel zu ersetzen durch einen Hinweis auf die Elemente details und summary einerseits und einen Link zum zugänglichen Akkordeon andererseits.

Der Artikel sollte nicht „zugängliches Akkordeon“ heißen, sondern „Akkordeon“. Dass die im Artikel beschriebene Komponente zugänglich implementiert ist, sollte normal sein und keiner besonderen Erwähnung im Titel bedürfen.

LLAP 🖖

[marctrix]

Hej Gunnar,

Der Artikel sollte nicht „zugängliches Akkordeon“ heißen, sondern „Akkordeon“. Dass die im Artikel beschriebene Komponente zugänglich implementiert ist, sollte normal sein und keiner besonderen Erwähnung im Titel bedürfen.

Logisch. Da es aber zugängliche Akkordeons nur mit JavaScript gibt, macht es Sinn, das Akkordeon im JS-Bereich zu besprechen. Als „Akkordeon mit JavaScript“, natürlich nicht als zugängliches Akkordeon.

Außerhalb des JavaScript-Bereiches einfach einen Hinweis darauf, wo sich der Artikel befindet und wie gesagt ein Hinwies auf die die meiner Meinung nach in vielen Fällen ausreichenden Elemente details und summary…

Marc

[Gunnar Bittersmann]

@@marctrix

Der Artikel sollte nicht „zugängliches Akkordeon“ heißen, sondern „Akkordeon“. Dass die im Artikel beschriebene Komponente zugänglich implementiert ist, sollte normal sein und keiner besonderen Erwähnung im Titel bedürfen.

Logisch. Da es aber zugängliche Akkordeons nur mit JavaScript gibt, macht es Sinn, das Akkordeon im JS-Bereich zu besprechen.

Nein!

Die ganze Aufteilung in Abschnitte „HTML“, „CSS“, „JavaScript“ macht keinen Sinn.

Zu einer Komponente gehört das Markup, vermutlich einige Stilregeln und etwas JavaScript. In einem Tutorial zu einer Komponente wird all dieses besprochen. Man kann so ein Tutorial nicht sinnvoll einer Kategorie „HTML“, „CSS“ oder „JavaScript“ zuordnen.

wie gesagt ein Hinwies auf die die meiner Meinung nach in vielen Fällen ausreichenden Elemente details und summary…

Der sollte selbstverständlich nicht fehlen. Und ganz am Anfang stehen.

LLAP 🖖

[dedlfix]

Tach!

Ich reiß das mal der Provokation wegen völlig aus dem Zusammenhang.

Die ganze Aufteilung in Abschnitte „HTML“, „CSS“, „JavaScript“ macht keinen Sinn.

Da sind wir ja einer Meinung. Aber warum hast du dann was gegen präsentationsbezogene Klassennamen und Eventhandler in onirgendwas-Attributen? 🤔

Keine (ernsthafte) Antwort erwartend, dedlfix.

[marctrix]

Hej Gunnar,

@@marctrix

Der Artikel sollte nicht „zugängliches Akkordeon“ heißen, sondern „Akkordeon“. Dass die im Artikel beschriebene Komponente zugänglich implementiert ist, sollte normal sein und keiner besonderen Erwähnung im Titel bedürfen.

Logisch. Da es aber zugängliche Akkordeons nur mit JavaScript gibt, macht es Sinn, das Akkordeon im JS-Bereich zu besprechen.

Nein!

Die ganze Aufteilung in Abschnitte „HTML“, „CSS“, „JavaScript“ macht keinen Sinn.

Kann man so sehen. Aufteilungen schaffen aber auch Übersicht. Es gibt Beispiele, die in so eine Aufteilung besonders gut passen und solche, die sich nur schwer einsortieren lassen.

Eine Struktur ist meist sehr wohl hilfreich. Unabhängig der verschiedenen Leitmechanismen wie Tutorials, Übersichten und Abschnitte gräbt die Suche alle Artikel hervor, unabhängig von Ihrer Verortung in dieser Struktur.

Lässt man die Struktur weg, bleibt eh nur die Suche. Insofern sehe ich in den Abschnitten keinen Nachteil. Vielen mögen sie bei der Orientierung zusätzlich zur Suche helfen.

Marc

[Matthias Apsel]

Hallo marctrix,

Ich schlage vor den Artikel zu ersetzen durch einen Hinweis auf die Elemente details und summary einerseits und einen Link zum zugänglichen Akkordeon andererseits.

Gute Idee! +1

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Hallo marctrix,

Ich schlage vor den Artikel zu ersetzen durch einen Hinweis auf die Elemente details und summary einerseits und einen Link zum zugänglichen Akkordeon andererseits.

Gute Idee! +1

Also kann der Artikel weg?

Dann schreibe ich zwei drei einleitende Sätze zu Akkordeons oder nehme was passendes aus dem bestehenden Artikel und verweise auf das JS-Akkordeon und details…

Marc

[Matthias Apsel]

Hallo marctrix,

Gute Idee! +1

Also kann der Artikel weg?

Ich würde sagen ja.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Gute Idee! +1

Danke!

Also kann der Artikel weg?

Ich würde sagen ja.

Dann ist das jetzt mal weg.

Die alte Version gibt es zur Not ja noch in der Historie…

Marc

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Du sagst es. Eine Checkbox, die nicht da ist, kann nicht bedient werden. Mit display: none ist sie nicht mehr da.

Mit der Maus lässt sie sich bedienen. https://codepen.io/MatthiasApsel/pen/JvWPjr

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Du sagst es. Eine Checkbox, die nicht da ist, kann nicht bedient werden. Mit display: none ist sie nicht mehr da.

Mit der Maus lässt sie sich bedienen. https://codepen.io/MatthiasApsel/pen/JvWPjr

Wenn ich von „bedienbar“ spreche, dann meine ich allgemein bedienbar; nicht unter speziellen Bedingungen bedienbar.

LLAP 🖖

[beatovich]

hallo

Mit der Maus lässt sie sich bedienen. https://codepen.io/MatthiasApsel/pen/JvWPjr

Wenn ich von „bedienbar“ spreche, dann meine ich allgemein bedienbar; nicht unter speziellen Bedingungen bedienbar.

Ich muss Gunnar Recht geben.

Wenn man die radio Elemente ausblenden will, dann muss man sie aus dem sichtbaren Bereich verschieben, aber gleichzeitig Sorge tragen, dass das assozierte Label den focus anzeigt.

Man muss ausserdem sich im Klaren sein, dass Redio und Checkboxen eine andersartige Tastaturbedienung erfordern (von Haus aus). Dies gilt es zu indizieren, gerade dann, wenn radios als ein Hack verwendet werden.

[marctrix]

Hej PadAmy,

hier konnte ich herausfinden, wie ich ein einfaches Accordeon umsetzen kann. Einige kleine Anpassungen erfüllen meine Bedürfnisse fast vollständig.

Eine Zeit lang war der Checkbox-Hack modern (aus dieser Zeit stammt der Artikel), er hat aber für verschiedene Nutzer mehr oder weniger große Nachteile.

Zwei Alternativen bieten sich an:

1. Verwende details und summary, die Elemente also, die HTML dafür explizit vorsieht. Funktionieren inzwischen in den meisten (aber immer noch nicht in allen) Browsern. Die fehlende Unterstützung kann man, wenn es einem denn wichtig ist, mit einem polyfill nachrüsten.

2. Verwende die Lösung, die Heiden Pickering in seinen inclusive components vorstellt: Collapsible Sections

Marc

[PadAmy]

<humor>
   Ihr wollt mich fertig machen, stimmt's?
</humor>

Vielleicht sollte ich einmal darlegen, was ich mir vorstelle:

• Ein Accordeon mit nur einem Eintrag. Im Titel das Wort "Details". Im sich öffnenden Fenster ein wenig Text (max. 100 Wörter) und evtl. ein Link.
• Man soll es wieder schließen können. Wenn das nicht ginge, würde die dargestellte Seite zu lang. (Es handelt sich um eine längere Liste von Buchveröffentlichungen. Initial dargestellt wird ein Bild des Titels, Titel und Untertitel und eine Minigrafik zu Kategorie. In den Details - also im geöffneten Accordeon - kommen dann ISBN, Verlag, Erscheinungsdatum, Klappentext und ein Link zur DNB. Deshalb soll das Aufklappen des Accordeons facultativ sein.)
• Javascript möchte ich gern vermeiden. Das Ganze wird in Wordpress stattfinden und ich weiß nicht, wie WP reagiert, wenn zusätzliches Javascript implementiert wird.
• Wordpress bietet Plugins für Accordeons an. Die sind aber alle unbefriedigend, weil in den Standarversionen das Design kaum beeinflußbar ist. Deshalb mein Weg zu selfhtml.
• Ich selbst kann ein wenig HTML und CSS, spiele aber bei Weitem nicht in einer erwähnenswerten Liga mit. Über Javascript möchte ich gar nicht reden.
• Wie ein Accordeon reagiert, wenn die Seite auf einam Smartphone geöffnet wird, weiß ich (noch) nicht.

Eure vorgschlagenen Lösungen sind super. Immer läuft es jedoch auf die Verwendung von Javascript hinaus. Das ist auch der Grund, warum ich auf die Checkbox-Hack-Variante gekommen bin - einfaches, verständliches CSS und HTML. Da komme sogar ich noch mit.

Gibt es für einen Javascript-Analphabeten eine Lösung?

Ich vertrau auf eure Kreativität.

LG, PadAmy

[JürgenB]

Hallo,

das Paar Details - Summary wurde, glaube ich, schon erwähnt. Browser, die das nicht unterstützen (IE, Edge) zeigen dann einfach alles an. Wenn die Zielgruppe nicht überwiegend diese Browser nutzt, hätte ich da kein Problem mit.

Gruß
Jürgen

[PadAmy]

das Paar Details - Summary wurde, glaube ich, schon erwähnt.>

Ach du liebe Zeit - das habe ich ja dauernd überlesen!

Asche auf mein Haupt!

Die Lösung oben ist wunderbar - sorry für meine Unaufmerksamkeit und vielen Dank an alle, die hier mitgedacht haben.

LG, PadAmy

[beatovich]

hallo

das Paar Details - Summary wurde, glaube ich, schon erwähnt.>

Ach du liebe Zeit - das habe ich ja dauernd überlesen!

Asche auf mein Haupt!

Die Lösung oben ist wunderbar - sorry für meine Unaufmerksamkeit und vielen Dank an alle, die hier mitgedacht haben.

Wunderbar mag es sein, aber ein Akkordeon ist es nicht.

Ausserdem sollte man im CSS sorge tragen dass ältere Browser da was vernünftiges anzeigen.

[marctrix]

Hej beatovich,

das Paar Details - Summary wurde, glaube ich, schon erwähnt.>

Ach du liebe Zeit - das habe ich ja dauernd überlesen!

Asche auf mein Haupt!

Die Lösung oben ist wunderbar - sorry für meine Unaufmerksamkeit und vielen Dank an alle, die hier mitgedacht haben.

Wunderbar mag es sein, aber ein Akkordeon ist es nicht.

wird es mit — Tadaaa! — ein bisschen JS, das dafür sorgt, dass alle open-Attribute entfernt werden, wenn eines gesetzt wird.

Ausserdem sollte man im CSS sorge tragen dass ältere Browser da was vernünftiges anzeigen.

Jeder Browser zeigt alles an, was sich in details befindet. Manche erst nach einem Klick darauf, manche immer… 😉

Das polyfill habe ich allerdings auch bereits hier verlinkt.

Marc

[beatovich]

hallo

Jeder Browser zeigt alles an, was sich in details befindet. Manche erst nach einem Klick darauf, manche immer… 😉

Das polyfill habe ich allerdings auch bereits hier verlinkt.

Marc

Ich habe hier mal die Tastatur getestet. https://mathiasbynens.be/demo/html5-details-jquery

Vielleicht kennst du eine polyfill-Anwendung die nicht kaputt macht, was mein Browser ohne kann?

[marctrix]

Hej beatovich,

Jeder Browser zeigt alles an, was sich in details befindet. Manche erst nach einem Klick darauf, manche immer… 😉

Das polyfill habe ich allerdings auch bereits hier verlinkt.

Ich habe hier mal die Tastatur getestet. https://mathiasbynens.be/demo/html5-details-jquery

Vielleicht kennst du eine polyfill-Anwendung die nicht kaputt macht, was mein Browser ohne kann?

Das polyfill macht bei Browsern, die details unterstützen doch gar nichts ?!?

Im Safari klappt es mit tastatur. In welchem Browser hast du denn Probleme?

Marc

[beatovich]

hallo

Das polyfill macht bei Browsern, die details unterstützen doch gar nichts ?!?

Firefox 59

[marctrix]

Hej beatovich,

hallo

Das polyfill macht bei Browsern, die details unterstützen doch gar nichts ?!?

Firefox 59

Der zickt tatsächlich rum. Geht, aber irgendwie komisch. Überspringt manches, man kommt nicht zurück, Fokus geht verloren…

Nichts was man einsetzen möchte.

Ich verwende das Polyfill in letzter Zeit nicht mehr, hatte früher immer das am Seitenanfang verlinkte jquery-polyfill im Einsatz. Das hat seinen Dienst getan.

Falls jQuery eh schon auf einer Seite geladen wird, kann man das ja nehmen, sonst lieber keins!

Marc

[Matthias Apsel]

Hallo beatovich,

Firefox 59

Kann ich bestätigen. Nachdem man ein details geöffnet hat, wars das mit der Tastaturbedienbarkeit.

Bis demnächst
Matthias

[beatovich]

hallo

<humor>
   Ihr wollt mich fertig machen, stimmt's?
</humor>

Jjjj...

Gibt es für einen Javascript-Analphabeten eine Lösung?

...ein

Die pseudoeigenschaft :focus-within steht in den Startlöchern

mit

ul li:focus-within p {display:block;}

liesse sich was machen, insofern das p-Element tabindex="1" hat.

Wehrmutstropfen: Damit das in allen Browsern geht, muss man halt doch den focus-DOM-Pfad mit Javascript setzen.

[marctrix]

Hej PadAmy,

<humor>
   Ihr wollt mich fertig machen, stimmt's?
</humor>

Schön, dass du es mit Humor nimmst!

Vielleicht sollte ich einmal darlegen, was ich mir vorstelle:

• Ein Accordeon mit nur einem Eintrag. Im Titel das Wort "Details". Im sich öffnenden Fenster ein wenig Text (max. 100 Wörter) und evtl. ein Link.

Dann ist details doch die Lösung!

Gibt es für einen Javascript-Analphabeten eine Lösung?

Die JavaScript-Lösung aus dem Wiki kannst du sicher kopieren 😉

Marc