multi select filter level functionality

Author: rakeshAlgo

preview-src/landing-page-tutorials.adoc

@@ -8,7 +8,7 @@
 [.data-filter-column]
 ====== {empty}
 ++++
-<div data-level="advanced" class="sub-heading two-column-heading">
+<div data-level="advanced" data-category="advanced java swift javascript " class="sub-heading two-column-heading">
 <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
 <div class="filter-info">
 <h5 >
@@ -59,7 +59,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" class="sub-heading two-column-heading">
+    <div data-level="intermediate" data-category="intermediate c# node Python "  class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -85,13 +85,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 
 [.box]
 .Component
-* C#
-* Node
 * Lorem ipsum
 
 [.box]
 .Languages
-* Lorem ipsum
+* C#
+* Node
+* Python
 
 ++++
 </div>
@@ -101,7 +101,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" class="sub-heading two-column-heading">
+    <div data-level="intermediate" data-category="intermediate .net" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -142,7 +142,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="beginner" class="sub-heading two-column-heading">
+    <div data-level="beginner" data-category="beginner ascidoc java php" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -184,7 +184,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" class="sub-heading two-column-heading">
+    <div data-level="intermediate" data-category="intermediate react " class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -225,7 +225,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="advanced" class="sub-heading two-column-heading">
+    <div data-level="advanced" data-category="advanced angular react vue" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >

src/js/10-landing-page-nav.js

@@ -14,19 +14,17 @@
 
   $filterCheckboxes.on('change', function() {
 
-  var selectedFilters = {
-
-  };
+  var selectedFilters = {};
 
    $filterCheckboxes.filter(':checked').each(function() {
 
     if (!selectedFilters.hasOwnProperty(this.name)) {
       selectedFilters[this.name] = [];
       //console.log(selectedFilters, 23)
     }
-
-    selectedFilters[this.name].push(this.value);
     console.log(selectedFilters, 27)
+    selectedFilters[this.name].push(this.value.toLowerCase());
+
   });
 
   // create a collection containing all of the filterable elements
@@ -39,9 +37,9 @@
     $filteredResults = $filteredResults.filter(function() {
 
       var matched = false,
-        currentFilterValues = $(this).find('.sub-heading').data('level').split(' ');
-       var test = $(this).find('.languages li p').text();
-        console.log(currentFilterValues, test, 48);
+        currentFilterValues = $(this).find('.sub-heading').data('category').toLowerCase().split(' ');
+     //  var test = $(this).find('.languages li p').text();
+        console.log(currentFilterValues, 48);
 
       // loop over each category value in the current .data-filter-column's data-category
       $.each(currentFilterValues, function(_, currentFilterValue) {

src/partials/tutorials-filter.hbs

@@ -10,17 +10,17 @@
                 <a href="#" class="nav-link"> <span class="arrow-right arrow"></span> Languages</a>
                 <ul class="sub-menu ">
                         <li>
-                            <input type="checkbox" id="java" class="check-mark" name="level" value="java"  />
+                            <input type="checkbox" id="java" class="check-mark" name="language" value="java"  />
                             <label for="java">Java</label>
 
                         </li>
                         <li>
-                            <input type="checkbox" id="C#" class="check-mark" name="level" value="C#"  />
+                            <input type="checkbox" id="C#" class="check-mark" name="language" value="C#"  />
                             <label for="C#">C#</label>
                         </li>
 
                         <li>
-                            <input type="checkbox" id="Node" class="check-mark" name="level" value="Node"  />
+                            <input type="checkbox" id="Node" class="check-mark" name="language" value="Node"  />
                             <label for="Node">Node</label>
 
                             </li>