How to hide certain divs in html with JavaScript

JavaScript
1

Good evening,

I’m busy building a product listing page and I am trying to figure out how I can hide certain products when a checkbox is clicked. I did a bit of reading and I think I could do this using JavaScript. If anyone is able to take a look at the page in question it would be much appreciated if someone could suggest how this should be coded.

I’m not sure if I can link to my private website within the forum?

Summary

http://owenmedia.uk/arc/products/index.html

Regards,
Greg

2

Normally you hide stuff with CSS, for example you can have CSS class:

.hide {
  display: none;
}

With JavaScript you can toggle this class

1 Like
3

Thanks for your reply @snigo!

This is starting to make sense to me. If I set all products as listed on the initial page with the class of hide and toggle them to display on with another class pertaining to their category which I can toggle to show by their Elemend.classList?

What I essentially want to achieve is a page of products e.g.

Product 1, Product 2, Product 3

Product 1 and 2 have the same class of ‘Bollard’ and Product 3 has a class of ‘Component’. I want to build a checkbox selector that when checkbox ‘Component’ is pressed only products which are components should display. Initially when the user lands on the page I want all of the products to show and only that of the checkbox when that is pressed and or multiple check-boxes selected too. Does that make sense?

4

Hi @gregorymowen

I like this post… maybe we can help each other, and probably more developers will join too.

  1. Why don’t you start by creating classes for each image. Product 1,2,3 should have the same class name.
  2. You can create an EventListener to listen to a click on the checkbox.
  3. Then you can loop all the products 1,2,3 that have the same class
  4. Grab the checkbox and if its true meaning its checked! then display block else display none. with pure Vanilla JS.
  5. Add a class to the CSS containing the product class name and add display none to it.

Hope this helps… Let us know.