diff --git a/docs/_includes/custom/shuffle_panel.html b/docs/_includes/custom/shuffle_panel.html
index d3e59ec169..8e8512cb60 100644
--- a/docs/_includes/custom/shuffle_panel.html
+++ b/docs/_includes/custom/shuffle_panel.html
@@ -1,16 +1,15 @@
 <!-- Argument summary: -->
 
-<!-- tag: tag determining the pages included in the panel -->
+<!-- tags: tag determining the pages included in the panel -->
 <!-- title: Display title of the panel -->
 <!-- description: Description of the panel -->
 <!-- image (optional) : Name of the image to use, as a css class, eg "fa-list" -->
 <!-- titlemaker (optional) : name of a variable that's evaluated to determine the displayed title of the page. Default is page.title -->
 
 
-{% capture titlemaker %} {{ include.titlemaker | or_else: "page.title" }} {% endcapture %}
+{% capture titlemaker %} {{ include.titlemaker | default: "page.title" }} {% endcapture %}
 
-
-<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["{{ include.tag }}"]'>
+<div class="col-xs-6 col-sm-4 col-md-4" data-groups='{{ include.datagroups }}'>
     <div class="panel panel-default">
 
 
@@ -31,11 +30,11 @@
             </p>
             <ul>
                 {% for page in site.pages %}
-                {% for tag in page.tags %}
-                {% if tag == include.tag %}
-                <li><a href="{{page.url | remove: '/'}}">{% eval titlemaker %}</a></li>
-                {% endif %}
-                {% endfor %}
+                    {% capture alltags %}{{ page.tags | contains_all: include.tags }}{% endcapture %}
+                    <!-- ugly, but one can only capture string values -->
+                    {% if alltags contains "true" %}
+                        <li><a href="{{page.url | remove: '/'}}">{% eval titlemaker %}</a></li>
+                    {% endif %}
                 {% endfor %}
             </ul>
         </div>
diff --git a/docs/_includes/initialize_shuffle.html b/docs/_includes/initialize_shuffle.html
index 9a0f048dd1..8f3368ed2c 100644
--- a/docs/_includes/initialize_shuffle.html
+++ b/docs/_includes/initialize_shuffle.html
@@ -98,9 +98,9 @@ $(document).ready(function() {
 
     </script>
 
-    <!-- new attempt-->
+<!-- new attempt-->
 
-    <script>
+<script>
     $(document).ready(function() {
      
     /* initialize shuffle plugin */
diff --git a/docs/_plugins/custom_filters.rb b/docs/_plugins/custom_filters.rb
index b2fefae571..7ba31c7114 100644
--- a/docs/_plugins/custom_filters.rb
+++ b/docs/_plugins/custom_filters.rb
@@ -1,13 +1,27 @@
 module CustomFilters
-  # returns the input if it's a non-blank string, otherwise return default value
-  def or_else(input, default)
-    if input
-      input.strip != "" ? input : default
+
+  def contains_all(input, test)
+    if !test
+      !input
+    elsif !input
+      false
     else
-      default
+      test.split(",").all? {|val| input.include?(val)}
+
     end
   end
 
+  def intersect(xs, ys)
+    xs & ys
+  end
+
+  def union(xs, ys)
+    xs | ys
+  end
+
+  def diff(xs, ys)
+    xs - ys
+  end
 end
 
 Liquid::Template.register_filter(CustomFilters)
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 896ff473d6..be5a79373e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -18,26 +18,59 @@ First time user? Then you may be interested in our [quickstart series](TODO)!
 
 <br/>
 
-<div id="grid" class="row">
 
-    {% include custom/shuffle_panel.html
-       tag="getting_started"
-       description="These pages summarize the gist of PMD usage to get you started quickly:"
-       title="Getting started" %}
-
-
-    {% include custom/shuffle_panel.html
-       tag="rule_references"
-       title="Rule references"
-       description="Pick your language to find out about the rule it supports:"
-       image="fa-database"
-       titlemaker="page.language_name" %}
-
-    {% include custom/shuffle_panel_filler.html %}
+{% unless site.output == "pdf" %}
+<script src="js/jquery.shuffle.min.js"></script>
+<script src="js/jquery.ba-throttle-debounce.min.js"></script>
+{% endunless %}
 
+<div class="filter-options">
+      <button class="btn btn-primary" data-group="all">All</button>
+      <button class="btn btn-primary" data-group="getting_started">Getting Started</button>
+      <button class="btn btn-primary" data-group="userdocs">User documentation</button>
+      <button class="btn btn-primary" data-group="extending">Extending PMD</button>
+      <button class="btn btn-primary" data-group="contributing">Contributing</button>
 </div>
 
 
+<div id="grid" class="row">
+
+    {% include custom/shuffle_panel.html
+       tags="getting_started"
+       datagroups='["getting_started"]'
+       description="These pages summarize the gist of PMD usage to get you started quickly."
+       title="Getting started" %}
+
+
+
+    {% include custom/shuffle_panel.html
+       tags="rule_references"
+       datagroups='["userdocs"]'
+       title="Rule references"
+       description="Pick your language to find out about the rule it supports."
+       image="fa-database"
+       titlemaker="page.language_name" %}
+
+    {% include custom/shuffle_panel.html
+       tags="userdocs,extending"
+       datagroups='["userdocs", "extending"]'
+       title="Writing rules"
+       description="These pages document the process of writing and testing custom rules and metrics for PMD."
+    %}
+
+
+   <!-- {% include custom/shuffle_panel_filler.html %} -->
+
+</div>
+
 <!-- {% include image.html file="pmd-logo-big.png" alt="PMD Logo" %} -->
 
+{% unless site.output == "pdf" %}
+
+{% include initialize_shuffle.html %}<!-- new attempt-->
+
+{% endunless %}
+
+
+
 {% include links.html %}