Syntax und Code

Es gibt keinen Download-Button. Kopieren Sie sich einfach die Quellen.

Grundlegende Syntax

<element class="
  [ details | details exclusive | ifSmallScreen | akkordeon | akkordeon exclusive | tabpanel | navigation ]
  <!-- optionale Classe
  closeOnInnerClick
  -->
  ">
  <!-- optionale 0 - n Element-Ebenen
  <element>
    <element>
    -->
      <button 
        aria-expanded="true"
        <!-- optional 
        class="addCloseButton"
        -->
        >
        Button-Content
      </button>
      <element>
        any Element Content
      </element>
    <!--
    </element>
  </element>
  -->
</element>

CSS

Es gibt keinen Download-Button. Kopieren Sie sich einfach die Quellen.

Javascript

Es gibt keinen Download-Button. Kopieren Sie sich einfach die Quellen.

Caveats

Ich übernehme keine Garantie für den Code. Mindestens auf dem Papier ist das Javascript ab MSIE-10 unterstützt.
Wollen Sie alte Browser unterstützen, dann brauchen Sie Polyfills für
classList (MSIE9--, Safari5--, Android2.3--),
querySelector (MSIE8--) und
matchMedia (MSIE9--, Safari5--, Android2.3--).

Barriere-Freiheit

In einigen Ländern schreiben Gesetze vor, dass Inhalte allgemein zugänglich sein müssen.
Verstecken Sie diese Inhalte nicht in Boxen, die nur mit Javascript zugänglich sind.

Die Klapper-Logic tut das nötige, um die Barierefreiheit sicherzustellen.
Vergessen Sie aber nicht, dass Sie für dasselbige Ihres eigenen Codes selber verantwortlich sind.
Die Klapper-Logic steht Ihnen dabei nicht im Wege.

Verstecken oder Ausblenden?

display:none (verstecken) entfernt einen ganzen fokusierbaren Teilbaum. Gerade für Tastaturbenutzer ist das viel besser.
Ausblenden muss man, wenn man transition-Effekte anwenden will. Sie können beides machen. Das aria-hidden Attribut wird automatisch gesetzt.
Wenn Sie ausblenden statt verstecken wollen, dann beachten Sie, dass der zu behandelnde Teilbaum nur wenige fokusierbare Elemente enthält.

Sprachen

Die Spachangabe im html-Element bestimmt die Sprache des zusätzlichen Schliessen-Buttons.
Unterstützt werden derzeit: Englisch, Spanisch, Deutsch, Französisch, Italienisch, Portugiesisch, Holländisch und Russisch.

History & Roadmap

Version: (0^0)

History

  • 14.5.2018: Erste Testversion.
  • 15.5.2018: forEach ersetzt.
  • 15.5.2018: Tests für Safari/iOS
  • 16.5.2018: addCloseButton registriert keinen Event-Handler mehr.
  • 16.5.2018: closeOnInnerClick ergänzt
  • 17.5.2018: Navigationen werden bei Link-Klick insgesamt geschlossen.
  • 19.5.2018: Erster Panel-Tab bleibt nun in allen Situationen offen.
  • 1.6.2018: ifSmallScreen: Viewport-abhängiger Schalter hinzugefügt.

Roadmap

  1. Ergänze automatisch einen Button bei Klasse addOpenNextButton.
    Bei Tabpanels für mehrstufige Aktionen soll über einen alternativen Button zur nächsten Stufe gewechselt werden können.

Bugs

  • bereinigt(19.5.2018): addCloseButton und closeOnInnerClick schliesst auch ein enthaltenes Tabpanel.
  • open(1.6.2018): ifSmallScreen könen nicht innerhalb anderer Klappboxen verwendet werden.

Lizenz

Sie dürfen die Ihnen explizit angebotenen Quellen für Javascript und CSS ohne jede Einschränkung oder Bedingung nutzen.

Alles andere ist als Content zu erachten, der dem Copyright unterliegt, allein der Inhalte halber.

Mein Danke

Mein Dank geht an die Community von SelfHtml für Ihre aktive Mitilfen beim Debugging.
Hint: Verwende nie querySelectorAll()forEach()!

Kontakt

Für Bug-Berichte: Kontaktseite und Impressum

Einfache Anwendungen

Single Details

Regeln

  1. Jeder Button der ein Kindelement einer details-Klasse ist, wird als Details-Button gerendert
  2. Der Button wird ohne weitere Angaben nicht von anderen Klappboxen beinflusst.
  3. Die Box wird ohne weitere Angaben nicht durch innere Link-Klicks geschlossen.

Klappboxen können allein stehen und damit isoliert eingesetzt werden.

Wenn der Inhalt sehr lange ist, kann ein zusätzlicher Schliessen-Button erzeugt werden.
Notieren Sie dazu die Klasse addCloseButton im Button-Element


Beispiel

Ein alleinstehendes Details ohne weitere Abhängigkeit
Der Button enthält zudem die Klasse addCloseButton, wodurch am Ende ein zusätzlicher Schliessen-Button erzeugt wird.
Die Sprache des erzeugten Buttons passt sich dem lang-Attribut des html-Elements an.
Links dürfen das Details nicht schliessen Test-Link.

Details bei innerClick schliessen

Mit der Klasse closeOnInnerClick veranlassen Sie, dass ein Detail bei Klick auf einen inneren Link geschlossen wird.
Bei Navigationen existiert closeOnInnerClick implizit.

Regeln

  1. Jeder Button der ein Kindelement einer details-Klasse ist, wird als Details-Button gerendert
  2. Der Button wird ohne weitere Angaben nicht von anderen Klappboxen beinflusst.
  3. Diese Box wird innere Link-Klicks geschlossen.

Klappboxen können allein stehen und damit isoliert eingesetzt werden.

Wenn der Inhalt sehr lange ist, kann ein zusätzlicher Schliessen-Button erzeugt werden.
Notieren Sie dazu die Klasse addCloseButton im Button-Element


Beispiel

Ein alleinstehendes Details ohne Zusammenhang
Der Button enthält zudem die Klasse addCloseButton, wodurch am Ende ein zusätzlicher Schliessen-Button erzeugt wird.
Die Sprache des erzeugten Buttons passt sich dem lang-Attribut des html-Elements an.
Link-Klick MUSS dieses Details schliessen Test-Link.

Details gruppieren

Regeln

Gruppen von Details dürfen auch unter einer Klasse zusammengefasst werden.

  1. Klick darf nicht andere Elemente beinflussen.
  2. Aktivitäten dürfen die Box nicht schliessen


Beispiel

  • Contet...
  • Link soll Box nicht schliessen: Test

Details exclusive

Regeln

  1. Nur eines oder keines der Elemente darf offen sein
  2. Aktivitäten dürfen die Box nicht schliessen
  3. Details dürfen verschachtelt sein

Die Klasse exclusive bewirkt das exclusive Schaltverhalten zwischen Geschwister-Details.



Beispiel

  • Content...
  • Mit mehr exklusiv geschalteten Details...

    • Content: Test
    • lorem ipsm dolres sunt

Spezifische Anwendungen

Bisher haben wir die Klasse details verwendet.
Die alternativen Klassen akkordeon, tabpanel und navigation haben spezifisches CSS, erben aber ansonsten das JS-Verhalten.

ifSmallScreen (Hamburger)

Mit der Klasse ifSmallScreen wird bei Viewport-Änderung geprüft, ob Details im Stil für Hamburger einblendbar sein sollen. Sie können die Klasse smallScreenTrue auswerten.

Regeln

  1. Ein Button soll nur bei Klasse smallScreenTrue erscheinen.
  2. Der inhalt soll bei fehlendem smallScreenTrue immer erscheinen.
  3. Der Splitpunkt liegt bei 40em Breite des Elements mit ifSmallScreen-Klasse.

Für Mobiles Details einschalten: Notieren Sie die Klasse details ifSmallScreen

Experimentieren Sie und ändern Sie die Bildschirmbreite.


Beispiel

Diese Klappbox erscheint abhängig von der Viweport-Breite
Überschreitet die Breite 40em, dann wird keine Box dargstellt, statt dessen wird der Inhalt direkt angezeigt.
Unterschreitet die Breite 40em, dann wird die Box als Klappbox dargestellt. Zusätzlich wird die Klasse smallScreenTrue gesetzt.
Der Button wird am Besten hier mit einem Hamburger-Icon versehen.
Man beachte hier die zusätzliche Angabe aria-label="menu" im Button.

Akkordeon exclusive

Regeln

  1. Mit Klasse akkordeon wird die Akkordeon Darstellung verwendet.
  2. Mit Klasse exclusive: Nur eines oder keines der Elemente darf offen sein
  3. Ohne Klasse exclusive: mehrere Elemente können offen sein.
  4. Aktivitäten dürfen die Box nicht schliessen.

Beispiel

  • Akkordeon
    Erstes Element
  • Zweites Element
  • Dies ist der Inhalt des Dritten Elements

Tabpanel

Tabpanels haben eine individuell eingestellte Grösse. Ein Tab, in der Regel der erste, ist dabei immer sichtbar.

Regeln

  1. Mit der Klasse tabpanel wird das CSS vor Tabpanel-Darstellung verwendet.
  2. Genau ein Tab muss offen sein.
  3. Aktivitäten in einem Tab dürfen den Tab-Panel-Zustand nicht verändern

Beispiel

  • Geben Sie Ihre Email Adresse an. Sie erhalten einen Freischaltcode auf ihre Mailbox

    Fahren Sie in Schritt 2 fort

  • Geben Sie den Ihnen Zugesandten Freischaltcode ein.
    Sie erhalten darauf hin bei Erfolg ihr Passwort

    Fahren Sie in Schritt 3 fort

  • Inhalt

Horizontale Navigation

Mit der Klasse navigation wird das logische Verhalten für Navigationen geschaltet.
Horizontale Navigationen haben in der Regel eine maximale Breite.

Regeln

  1. Maximal eine Gruppe darf geöffnet sein
  2. Aktivitäten sollen das Menu schliessen.
  3. In Navigationen ist die Klasse exclusive implizit vorhanden.

Beispiel

Das folgende Beispiel verschachtelt gleich zwei Navigationen ineinander.
Zudem kommen normale Links vor, die wie Buttons dargestellt werden. Klick auf die Links schliesst die Navigation.

Dieser Inhalt kann temporàr verdeckt werden.

ifSmallScreen & Navigation

Viewport-abhängige Navigation wird durch Verschachteln von ifSmallScreen und navigation erreicht.

Beispiel

In diesem Beispiel wurde die vorher gezeigte Navigation unverändert in eine ifSmallScreen Box eingefügt,
um das Verhalten bei komplexen Navigationen zu überprüfen.


Rauf