Rolf B: DOM, document.getElementsByClassName, get index?

Beitrag lesen

Hallo Volkmar,

eine Prise JavaScript brauchst Du, wenn Du einen großflächigen Togglebutton ohne Checkbox-Hack verwenden willst, aber der Rest geht mit CSS.

Bei diesem HTML

<div class="toggleImage" aria-checked="false">
  <button></button>
  <figure>
    <img src="...url..." height="300" alt="Alt-Beschreibung">
    <figcaption>...</figcaption>
  </figure>
</div>

und diesem JavaScriptchen, das nichts weiter tut als am .toggleImage div den aria-checked State umzuschalten:

document.addEventListener("click", function(e) {
  let btn = e.target;
  if (btn.tagName != "BUTTON") return;
    
  let tgl = btn.closest(".toggleImage");
  if (!tgl) return;

  let ch = (tgl.getAttribute('aria-checked') == "false") ? "true" : "false";
  tgl.setAttribute('aria-checked', ch);
})

geht der Rest mit CSS. Zum Beispiel so:

.toggleImage {
  display: flex;
}
.toggleImage button {
  flex: 0 0 3em;
  position: relative;
  height: 3em;
}
.toggleImage figure {
  flex: 1 0 auto;
  display:none;
}
.toggleImage[aria-checked=true] figure { display:block; }

.toggleImage[aria-checked=true] button::before {
  content: "\2713";
  position: absolute; top: -0.5em; left: 0;
  font-size: 4em;
}

.toggleImage[aria-checked] button::after {
  content: "OFF";
  position: absolute;
  top: 3em; left: 0em;
  width: 3em; text-align:center;
}
.toggleImage[aria-checked=true] button::after { content: "ON"; }

Die Darstellungsvarianten hängen am Wert des aria-checked Attributes, der ON/OFF Text wird mit ::after unter den Button gesetzt, und das Check-Häkchen mit ::before hinein. Weil das Häkchen über den Button hinausragen soll, habe ich es absolut positioniert.

Um Button und Bild nebeneinander zu bekommen, verwende ich flexbox.

Beispiel in JSFiddle

Rolf

--
sumpsi - posui - clusi