I am looking to design a single page where the display of categorized items changes based on user selection. Ideally, I want this to be chapter/hash (:target) dependent, but checkboxes influencing state would also work.
As an experiment, I am trying to achieve this without the use of Javascript. While it seems impossible, I am open to being proven wrong.
To elaborate: in this scenario, there are multiple items on a page, each belonging to one or more categories. The user will choose a category, prompting all matching items to have their display set to block. Items not falling under the selected category will be hidden (display: none). For instance, if selecting a class instead of ID with :target, the structure could look like this:
<a href="#category1>Category 1</a>
<a href="#category2>Category 2</a>
<a href="#category3>Category 3</a>
<span class="category1 category2">Item 1</span>
<span class="category2 category3">Item 2</span>
<span class="category3">Item 3</span>
and corresponding CSS:
span {
display: none;
}
:target {
display: block;
}
(While achievable through Javascript, I am exploring non-Javascript options.)