After successfully creating a javascript-only filter, I have hit a roadblock and could really use some assistance.
The filter is divided into "days" and "events".
When a user clicks on a day or multiple days, the events for those selected days are displayed.
Moreover, users can further narrow down their selection by clicking on specific events to only display those particular events for the selected days.
I have managed to get this functionality working, but I am struggling with making it work the other way around. If they have only selected the event(s) without choosing a day, nothing is shown.
Additionally, I am exploring how to incorporate a "show all" checkbox that would uncheck other boxes while displaying all dates/events.
function change() {
let results = Array.from(document.querySelectorAll('.result > div')),
dayChecked = document.querySelectorAll('.filter input.day:checked'),
eventChecked = document.querySelectorAll('.filter input.event:checked');
// Hide all results
results.forEach(function(result) {
result.style.display = 'none';
});
// Filter results to only those that meet ALL requirements:
filterdayOrevent(dayChecked);
if (eventChecked.length != 0) {
filterdayOrevent(eventChecked);
}
function filterdayOrevent(dayOreventChecked) {
results = Array.from(dayOreventChecked).reduce(function(sum, input) {
const attrib = input.getAttribute('rel');
return sum.concat(results.filter(function(result) {
return result.classList.contains(attrib);
}));
}, []);
}
// Show those filtered results:
results.forEach(function(result) {
result.style.display = 'block';
});
}
change();<div class="filter">
<div class="checkbox">
<label><input type="checkbox" rel="" class="" onchange="change()" />Show All</label>
</div>
<h1>Select day</h1>
<div class="checkbox">
<label><input type="checkbox" rel="friday" class="day" onchange="change()" />Friday</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="saturday" class="day" onchange="change()" />Saturday</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="sunday" class="day" onchange="change()" />Sunday</label>
</div>
<h1>Select event</h1>
<div class="checkbox">
<label><input type="checkbox" rel="screening" class="event" onchange="change()" />Screening</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="seminar" class="event" onchange="change()" />Seminar</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="social" class="event" onchange="change()" />Social</label>
</div>
</div>
<P></P>
<div class="result">
<div class="friday screening">Friday / Screening</div>
<div class="friday seminar">Friday / Seminar</div>
<div class="friday social">Friday / Social</div>
<div class="saturday screening">Saturday / Screening</div>
<div class="saturday seminar">Saturday / Seminar</div>
<div class="saturday social">Saturday / Social</div>
<div class="sunday screening">Sunday / Screening</div>
<div class="sunday seminar">Sunday / Seminar</div>
<div class="sunday social">Sunday / Social</div>
</div>