Filter-box

This HTML page demonstrates how to use the filterbox.js script to show and hide content on your page. The page consists of a <section class="filterbox-data"> tag containing checkboxes, and a <section class="filterbox-content"> containing content to be filtered. Click the filters below to show and hide their content.

The first column of controls also has the radio-checkbox-group class applied, which is a useful enhancement to these sorts of controls. After you have experimented with this page, you might want to look at the filterbox with styling demo.

Things to observe when you inspect the page elements as you interact with the page:

• Each of the content paragraphs is decorated with CSS classes (e.g., fur and four-legs for Cat). When you uncheck a checkbox a filter class (e.g., hide-fur) is added to the data container and any paragraphs with that value class are hidden.
• An animal shows up if it satisfies at least one checkbox in a column. For example, the dinosaur Psittacosaurus has both feathers and scales, so either checkbox will make it visible. This is a bit counter-intuitive as the data container has the class hide-feathers but the dinosaur is shown because hide-scales is not also present. I had to choose between "show-XXX" and "hide-XXX" for the naming and went with "hide" because the CSS rules use display: none, even though the specific rule in this case only kicks in if both hide classes are present.
• For an animal to show up it must satisfy at least one checkbox in both columns — if you hide either fur or 4 legs the cat is hidden. This is because one column has class filter-dermis and the other has class filter-legs so the "show if any checkbox is satisfied" behaviour described above does not apply.
• When you toggle 4 legs the class that is added is hide-four-legs — the number turns into a word. This is important since CSS class names cannot begin with a digit.
• When you toggle 0 legs the class that is added is hide-no-legs — because id="no-legs" was explicitly set on the checkbox and that overrides the general digits-to-words behaviour.
• You can press and hold on a checkbox in the first column to treat it as a radio button and deselect all other checkboxes in that column. This is due to code in radio-checkbox-group.js and the presence of the radio-checkbox-group class on the container. I strongly recommend including that file and adding that class to all of your control sets; it makes the first column much more usable than the second column.