Grafik zerstört meinen "Read-more" Code

[Gunnar Bittersmann]

@@MJCool81

Okay, danke für deine Erläuterungen.

Sieht alles komplizierter aus als ich es mir gedacht habe. Da ich weder Fachinformatiker noch Programmierer bin werde ich das so wohl nicht umsetzen können. Schade!

Ach was, so schlimm ist das nicht.

Erster Quick fix:

Nicht

.read-more-state {
	display: none;
}

sondern

.read-more-state {
	position: absolute;
	opacity: 0;
}

Und den Fokus sichtbar machen:

.read-more-state:focus ~ .read-more-trigger {
	outline: medium solid lightblue;
}

Und schon klappt’s auch mit Tastaturbedienung.

Ein Screenreader liest freilich immer noch Unfug vor. Das liegt daran, dass Checkboxen missbraucht werden. „Pure CSS“ anzustreben ist hier Unsinn; eine Lösung mit Button und JavaScript deutlich besser.

LLAP 🖖