Inhalte ausblenden

[Gunnar Bittersmann]

@@Meowsalot

besteht die Möglichkeit über ein data-attribut Inhalte auf meiner Webseite auszublenden? Es geht mir um folgende Option:

Ich habe eine Liste von Einträgen, jetzt möchte nur die angezeigt bekommen die mir zugeordnet wurden. Meine Idee war ich nutze ein data-attribut z.B.

data-name="meowsalot"

Die Idee ist gut.

wenn ich jetzt eine Checkbox anklicke

Diese weniger. Ein Toggle-Button ist die bessere Idee.

“The trouble with using form elements is their longstanding association with the collection of data. That is, checkboxes and radio buttons are established as controls for designating values. When a user checks a checkbox, they may just be switching a state, but they may suspect they are also choosing a value for submission.
“Whether you’re a sighted user looking at a checkbox, a screen reader user listening to its identity being announced, or both, its etymology is problematic. We expect toggle buttons to be buttons, but checkboxes and radio buttons are really inputs.”

dann sollten alle anderen ausgeblendet werden die nicht mir zugeordnet wurden.

also alle Items in der die Liste (bspw. <ul id="einträge">) selektieren, die nicht data-name="meowsalot" sind:
#einträge > li:not([data-name="meowsalot"])

Ist dieses möglich?

Klar. Nehmen wir solch einen Button (bspw. <button id="filter" aria-pressed="false">), der sein aria-pressed-Attribut zwischen "true" und "false" umschaltet.

Wenn die Liste (bspw. <ul id="einträge">) ein nachfolgendes Geschwisterelement des Buttons ist, dann:

#filter[aria-pressed="true"] ~ #einträge > li:not([data-name="meowsalot"])
{
	display: none;
}

Die robustere Variante (geht auch, wenn die Liste kein nachfolgendes Geschwisterelement des Buttons ist): per JavaScript nicht nur das aria-pressed-Attribut umschalten, sondern auch noch ein data-Attribut (oder class-Attribut) für die Liste. Bspw. data-filtered="true" und

#einträge[data-filtered="true"] > li:not([data-name="meowsalot"])
{
	display: none;
}

LLAP 🖖