Sunday, September 29, 2013

Simple jQuery Content Filter for Office 365 Public Website

I had the need recently to quickly create a content filter for the SPS Chicago session page. The page lists all the upcoming sessions in a paragraph format, something like this:

Title 1
Speaker 1
Session Abstract 1

Title 2
Speaker 2
Session Abstract 2

etc...

I wanted something simple at the top of the page that would allow users to filter the sessions based on some kind of key word.

So, I wrapped each of the sessions in a div with a class name of a descriptive term, something like this:

<div class="DemoDeveloper">
Title 1
Speaker 1
Session Abstract 1
</div>

Then I added check boxes to the top of page for each descriptive term, like this:


I wanted it so that when you checked a box, the applicable sessions were displayed. When the check box was unchecked, those sessions were hidden. So, I added the following jQuery to the page (for brevity I only show the developer check box functionality below):

        $(document).ready(function () {
            function DemoToggleView() {
                if (!$("#DemoDeveloperCheckbox").prop("checked")) {
                    $(".DemoDeveloper").hide();
                } else {
                    $(".DemoDeveloper").show();
                }
            };
            $("#DemoDeveloperCheckbox").click(DemoToggleView);
        });

The "DemoToggleView" is just a function that either hides or shows divs with a class of "DemoDeveloper" depending on whether the check box is checked or unchecked. The second part of the code attaches the function "DemoToggleView" to the click event of the checkbox.

Here's what it looks like in action. Click the checkbox to toggle the developer sessions. Note that "Title 1" is wrapped in a div class of "DemoDeveloper".

Developer    

Title 1
Speaker 1
Session Abstract 1


Title 2
Speaker 2
Session Abstract 2


As always, let me know what Think

[Edit] Matt Bramer refactored this into a much cleaner solution. Check it out here: 
http://mattbramer.blogspot.com/2013/10/simpler-jquery-content-filter.html?m=1 .

No comments:

Post a Comment