A post titled: Simple jQuery Content Filter for Office 365 Public Website by Doug Hemminger came by my twitter stream that caught my eye. A real quick win and all around goodness for everyone. Reading through, I noticed some things I could tidy up. So I asked him if he'd be okay if I re-factor the code that he blogged about and he said absolutely!
As I was writing this up, I also had another idea... Why not have all of the filters show no matter how far down you scroll? This is also a quick and easy win, so it's in there too.
Even though this is a simple solution, I knew it could be made simpler. :) I got it down to this:
UX
It's almost expected these days to be able to click the text next to a checkbox and have it just work. Doug is using <span> for the text, so changing this to use <label> and wrap the <input> is a real quick win.As I was writing this up, I also had another idea... Why not have all of the filters show no matter how far down you scroll? This is also a quick and easy win, so it's in there too.
DRY
DO NOT REPEAT YOURSELF!
I'm totally guilty of this, but I try to do my best every time. I checked the source of the page where the code was added and found:
$(document).ready(function () {
function SPSToggleView() {
if (!$("#SPSBusinessCheckbox").prop("checked")) {
$(".SPSBusiness").hide();
} else {
$(".SPSBusiness").show();
}
if (!$("#SPSInformationWorkerCheckbox").prop("checked")) {
$(".SPSInformationWorker").hide();
} else {
$(".SPSInformationWorker").show();
}
if (!$("#SPSCertificationCheckbox").prop("checked")) {
$(".SPSCertification").hide();
} else {
$(".SPSCertification").show();
}
if (!$("#SPSBusinessIntelligenceCheckbox").prop("checked")) {
$(".SPSBusinessIntelligence").hide();
} else {
$(".SPSBusinessIntelligence").show();
}
if (!$("#SPSDeveloperCheckbox").prop("checked")) {
$(".SPSDeveloper").hide();
} else {
$(".SPSDeveloper").show();
}
if (!$("#SPSITProCheckbox").prop("checked")) {
$(".SPSITPro").hide();
} else {
$(".SPSITPro").show();
}
if (!$("#SPSCloudCheckbox").prop("checked")) {
$(".SPSCloud").hide();
} else {
$(".SPSCloud").show();
}
if (!$("#SPSSocialCheckbox").prop("checked")) {
$(".SPSSocial").hide();
} else {
$(".SPSSocial").show();
}
if (!$("#SPSGeneralCheckbox").prop("checked")) {
$(".SPSGeneral").hide();
} else {
$(".SPSGeneral").show();
}
};
$("#SPSInformationWorkerCheckbox").attr("checked", true);
$("#SPSBusinessCheckbox").attr("checked", true);
$("#SPSCertificationCheckbox").attr("checked", true);
$("#SPSBusinessIntelligenceCheckbox").attr("checked", true);
$("#SPSDeveloperCheckbox").attr("checked", true);
$("#SPSITProCheckbox").attr("checked", true);
$("#SPSCloudCheckbox").attr("checked", true);
$("#SPSSocialCheckbox").attr("checked", true);
$("#SPSGeneralCheckbox").attr("checked", true);
$("#SPSInformationWorkerCheckbox").click(SPSToggleView);
$("#SPSBusinessCheckbox").click(SPSToggleView);
$("#SPSCertificationCheckbox").click(SPSToggleView);
$("#SPSBusinessIntelligenceCheckbox").click(SPSToggleView);
$("#SPSDeveloperCheckbox").click(SPSToggleView);
$("#SPSITProCheckbox").click(SPSToggleView);
$("#SPSCloudCheckbox").click(SPSToggleView);
$("#SPSSocialCheckbox").click(SPSToggleView);
$("#SPSGeneralCheckbox").click(SPSToggleView);
});Even though this is a simple solution, I knew it could be made simpler. :) I got it down to this:
$(document).ready(function () {
var $wrapper = $("#wrapper");
$wrapper.on("change", "input[data-filter]", function (event) {
var $this = $(this),
filter = $this.data("filter");
$wrapper.find("div[data-filter='" + filter + "']").slideToggle();
});
});
The magic is done by hiding the value(s) we are going to hide/show directly onto the <input> as a `data-filter` attribute. When the change event is fired, that value is surfaced. Then a simple query of the DOM to find the correct <div>'s that this filter relates to. The jQuery#slideToggle method knows whether or not the elements are hidden or displayed, so there's no need to check the state of the <input>.
