Creating a CSS product filter with numerous criteria for a unique user experience

Question

Creating a CSS product filter with numerous criteria for a unique user experience

While working on my website, I encountered a problem with making a filter work for multiple criteria simultaneously. Specifically, I am trying to filter by both color and size of a stone at the same time. Currently, I am using CSS to hide products that do not meet the specified criteria when a checkbox is checked:

input[id="example"]:checked

I have attempted to display the matching product and hide others by default, but that approach has not been successful. Are there any alternative solutions to achieve this? (I understand that using JavaScript would be easier, but it is not allowed for this particular project)

css user-interface

Answer 1

Answer №1

To enhance the assistance provided, it would be beneficial to include more HTML and incorporate additional CSS logic.

Here is a suggestion on how you can achieve this task using only CSS:

/* initially hide all items */
.items > * { display: none; }

/*
Toggle switches to display items based on matching criteria
Each item must meet at least one criterion to be visible 
*/
.filter#criteria-1:checked ~ .items .criteria-1 { display: block; }
.filter#criteria-2:checked ~ .items .criteria-2 { display: block; }
.filter#criteria-3:checked ~ .items .criteria-3 { display: block; }

<input class="filter" type="checkbox" id="criteria-1" checked>
<label for="criteria-1">Criteria 1</label>
<br>
<input class="filter" type="checkbox" id="criteria-2" checked>
<label for="criteria-2">Criteria 2</label>
<br>
<input class="filter" type="checkbox" id="criteria-3" checked>
<label for="criteria-3">Criteria 3</label>
<br>

<ul class="items">
  <li class="criteria-1 criteria-2">Item 1</li>
  <li class="criteria-1">Item 2</li>
  <li class="criteria-3">Item 3</li>
  <li class="criteria-2">Item 4</li>
  <li class="criteria-1 criteria-3">Item 5</li>
</ul>

Sandbox Link for Testing: https://codesandbox.io/s/wonderful-agnesi-4pe9y7

Answer 2

To enhance the assistance provided, it would be beneficial to include more HTML and incorporate additional CSS logic.

Here is a suggestion on how you can achieve this task using only CSS:

/* initially hide all items */
.items > * { display: none; }

/*
Toggle switches to display items based on matching criteria
Each item must meet at least one criterion to be visible 
*/
.filter#criteria-1:checked ~ .items .criteria-1 { display: block; }
.filter#criteria-2:checked ~ .items .criteria-2 { display: block; }
.filter#criteria-3:checked ~ .items .criteria-3 { display: block; }

<input class="filter" type="checkbox" id="criteria-1" checked>
<label for="criteria-1">Criteria 1</label>
<br>
<input class="filter" type="checkbox" id="criteria-2" checked>
<label for="criteria-2">Criteria 2</label>
<br>
<input class="filter" type="checkbox" id="criteria-3" checked>
<label for="criteria-3">Criteria 3</label>
<br>

<ul class="items">
  <li class="criteria-1 criteria-2">Item 1</li>
  <li class="criteria-1">Item 2</li>
  <li class="criteria-3">Item 3</li>
  <li class="criteria-2">Item 4</li>
  <li class="criteria-1 criteria-3">Item 5</li>
</ul>

Sandbox Link for Testing: https://codesandbox.io/s/wonderful-agnesi-4pe9y7

Creating a CSS product filter with numerous criteria for a unique user experience

Answer №1

Similar questions

Can an element in React be styled using the ID alone, without relying on className?

Customizing textarea colors in HTML

Can validity api provide a means of displaying errors in a list format?

What steps can I take to ensure a website designed for Firefox will work seamlessly on Safari and Chrome browsers as well?

Tips for saving the latest counter value in CSS and showcasing it as content in HTML

Tips for displaying the product title of an item in the Woocommerce shopping cart

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Can anyone explain why my navbar text is not aligning in the center?

The hover effect does not function on an SVG element when it is placed within an external file

Tips for accessing the ID, Name and Class of a specific DIV element with the class "Extreme" upon clicking a button

Differences in CSS text padding when rendered in Firefox compared to Chrome and other web

Adjustable DIV based on screen size

Including CSS in an HTML file does not function properly

Emphasize a specific word within a table row using Reactjs

Is it possible to apply a single jQuery statement to multiple selectors within the same webpage?

Using conditional statements in CSS with the "if else"

Adjusting the size of absolutely positioned div elements

Tips for successfully using `cols=""` within a grid container alongside a textarea

Viewing content below a clear, fixed element

HTML structure consisting of a 3 by 3 grid