PadAmy: Akkordeon wieder schließen ohne sichtbare Checkbox

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

  1. 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

    --
    Rosen sind rot.
    1. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. 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

        1. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. 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

            1. @@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 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. 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

                1. @@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 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. 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.

                  2. 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

            2. 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

              --
              Rosen sind rot.
              1. 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

                1. Hallo marctrix,

                  Gute Idee! +1

                  Also kann der Artikel weg?

                  Ich würde sagen ja.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                  1. 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

      2. 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

        --
        Rosen sind rot.
        1. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. 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.

            --
            Neu im Forum! Signaturen kann man ausblenden!
  2. 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

  3. <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

    1. 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

      1. 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

        1. 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.

          --
          Neu im Forum! Signaturen kann man ausblenden!
          1. 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

            1. 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?

              --
              Neu im Forum! Signaturen kann man ausblenden!
              1. 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

                1. hallo

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

                  Firefox 59

                  --
                  Neu im Forum! Signaturen kann man ausblenden!
                  1. 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

                  2. Hallo beatovich,

                    Firefox 59

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

                    Bis demnächst
                    Matthias

                    --
                    Rosen sind rot.
    2. 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.

      --
      Neu im Forum! Signaturen kann man ausblenden!
    3. 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