Textanzeige nur bei aktivierter Checkbox

[Matze]

So..... Da bin ich wieder!

Ich versuche eine Seite zu bauen die ein CSS Code für ein CMS (Joomla) generiert, der dann nur noch an der entsprechenden Stelle eingefügt werden muß. Es gibt verschiedene Boxen für unterschiedliche Teilbereiche.

Die erste Box ist soweit okay und die dritte noch ein undefinierbarer Schutthaufen denn ich später sortiere und aufarbeite aber bei der zweiten (Card-Body) brauche ich mal ein paar Tips.

Frage 1: Gibt es eine Möglichkeit das die dritt und Vorletzte Zeile im 'Code'teil ausgeblendet werden wenn die Checkbox für Rand nicht aktiviert ist. Selbes gilt auch für die letzte Zeile und der Checkbox für Schatten.

Frage 2: Gibt es eine Möglichkeit Teilbereiche der unteren Drei 'Code'zeilen per <span> oder ähnlichem einzufärben? Sprich, kann ich irgendwie ein TextContent erzeugen der ein Ausführbahren HTML-Code generiert.

Ich hoffe, ich konnte meine Fragen einigermaßen verständlich formulieren..... Sollte es Verständnis fragen geben - einfach her damit!

Danke für eure Hilfe

Matze

[Rolf B]

Hallo Matze,

man ist verleitet, für sowas den Checkbox-Hack zu verwenden, aber der ist nicht hinreichend zugänglich.

• Verwende einen Button statt der Checkbox.
• Verwende sprechendere IDs und denke bei mehreren Cards daran, dass eine ID auf der Seite eindeutig sein muss.
• Gib dem Button ein aria-controls-Attribut und liste darin die IDs auf, deren Sichtbarkeit von diesem Button abhängt (durch Leerzeichen getrennt)
• Gib dem Button ein aria-expanded-Attribut und setze es initial auf "false"
• Die Aria-Attribute sind erforderlich, damit Assistenztechniken wissen, was beim Umschalten passiert.
• Schreibe etwas JavaScript, das bei Klick auf den Button den Wert von aria-expanded zwischen "true" und "false" umschaltet
• Verwende CSS, um abhängig vom aria-expanded-Wert die gewünschten Elemente sichtbar zu machen. Alternativ kannst Du das auch im JavaScript an Hand von aria-controls steuern, um nicht für jede Schalter/Zeile-Relation eigenes CSS schreiben zu müssen.

#schalte_rand[aria-expanded=false] ~ ausgabe #line14 {
   display: none; 
}

Eventuell möchtest Du auch den Color-Input verstecken? Dann musst Du aber ein bisschen daran feilen, dass die Controls dabei nicht rumhüpfen...

Script - fügt jedem Button mit aria-controls Attribut die aria-expanded-Togglefunktion hinzu. Wenn das für Dich zu viel trifft, gib den Toggle-Buttons ggf. noch eine "toggle" Klasse und ergänze die im Selektor.

for (const button of document.querySelectorAll("button[aria-controls]") {
   button.addEventListener("click", function(event) {
      const expanded = button.getAttribute("aria-expanded");
      button.setAttribute("aria-expanded", expanded == "true" ? "false" : "true");
   }
}

Den Button kannst Du zum Beispiel, ähnlich wie das unser Wiki hier macht, als Schiebeschalter darstellen, abhängig vom aria-expanded Attribut. Vergiss aber nicht, ihn sinnvoll zu beschriften. Das Wiki zeigt nur die Idee, aber es verwendet eine Checkbox und zeigt den Checkbox-Hack. Nicht machen. Das Wiki ist hier überarbeitungsbedürftig.

Ob es zulässig ist, eine Checkbox mit aria-expanded/aria-controls zu versehen, weiß ich nicht. Das vereinfacht die Darstellung. Aber auch dafür brauchst Du JavaScript, das beim Umschalten des checked-Zustands den Wert von aria-expanded passend setzt.

Hier wäre der Schiebeschalter-Togglebutton als Button (nicht Checkbox, wie im Wiki). @Gunnar Bittersmann, muss ich hier noch visuell verborgenen Text haben, der den Zustand anzeigt? Der Zustand steckt bereits im aria-expanded, reicht das einem Screenreader schon?

<button type="button" class="toggle-expand" aria-controls="..." aria-expanded="false"></button>

button.toggle-expand {
    display: inline-block;
    position: relative;
    width: 4em; height: 2em;
    padding: 0;
    border: 2px solid red;
    border-radius: 1em;
	transition: all .3s ease-in-out;
}

button.toggle-expand::before {
    content: " ";
    display: block; position: absolute;
    top:-2px; left: -2px;
	width: 2em; height: 2em;
	border-radius: 1em;
	cursor: pointer;
	background-color: red;
	transition: all .3s ease-in-out;
}
button.toggle-expand[aria-expanded=true] {
    border-color: green;
}
button.toggle-expand[aria-expanded=true]::before {
  left: 2em;
  background-color: green;
}

Rolf

[Matthias Scharwies]

Servus!

Den Button kannst Du zum Beispiel, ähnlich wie das unser Wiki hier macht, als Schiebeschalter darstellen, abhängig vom aria-expanded Attribut. Vergiss aber nicht, ihn sinnvoll zu beschriften. Das Wiki zeigt nur die Idee, aber es verwendet eine Checkbox und zeigt den Checkbox-Hack. Nicht machen. Das Wiki ist hier überarbeitungsbedürftig.

Langfristig könnte man hier den Vorschlag der open-ui.org umsetzen:

<input type="checkbox" switch>

bzw:

<switch></switch>

Herzliche Grüße

Matthias Scharwies