Collapse filter lists when they are bigger than 5 items to prevent large filter lists.

assets/css/ajax-filter-posts.css

@@ -143,9 +143,14 @@
     FILTERS
 \*------------------------------------*/
 
+.ajax-posts__filterlist {
+  margin-bottom: 1rem;
+}
+
 .ajax-posts__filters ul {
     list-style-type: none;
     padding: 0;
+    margin-bottom: 0;
 }
 
 .ajax-posts__filter {
@@ -169,6 +174,44 @@
   background: none;
 }
 
+.ajax-posts__filterlist li:nth-child(n+6) {
+  max-height: 0;
+  overflow-y: hidden;
+  transition: max-height 0.2s ease;
+}
+
+.ajax-posts__filter-toggle {
+  padding: 5px; 
+}
+
+.ajax-posts__filter-toggle a:after {
+  margin-left: 5px;
+  content: "\25BE";
+  display: inline-block;
+}
+
+.ajax-posts__filter-toggle-hide {
+  display: none;
+}
+
+.ajax-posts__filter-toggle-hide:after {
+  transform: rotate(180deg);
+  position: relative;
+  top: 1px;
+}
+
+.ajax-posts__filterlist.is-collapsed li:nth-child(n+6) {
+  max-height: 35px;
+}
+
+.is-collapsed .ajax-posts__filter-toggle-hide {
+  display: block;
+}
+
+.is-collapsed .ajax-posts__filter-toggle-show {
+  display: none;
+}
+
 /*------------------------------------*\
     POSTS
 \*------------------------------------*/
@@ -181,6 +224,10 @@
   overflow: hidden;
 }
 
+.ajax-posts__post > a {
+  display: block;
+}
+
 .ajax-posts__post img {
   width: 100%;
 }
@@ -197,7 +244,7 @@
 }
 
 @media screen and (min-width: 35rem) and (max-width: 61rem) {
-  .is-expanded-filters .ajax-posts__post:nth-child(n+1) {
+  .is-expanded-filters .ajax-posts__post:nth-child(n+6) {
     margin-right: 50%; /* fake a second element to break the flow */
   }
 }

assets/js/ajax-filter-posts.js

@@ -26,8 +26,8 @@
         return true;
       });
 
-      on(container, 'click', '.js-load-more', function(event) { 
-          handleLoadMoreEvent(event.target);
+      on(container, 'click', '.js-collapse-filterlist', function(event) { 
+          toggleFilterListCollapse(event);
           event.preventDefault();
           return true;
       });
@@ -38,6 +38,12 @@
           return true;
       });
 
+      on(container, 'click', '.js-load-more', function(event) { 
+          handleLoadMoreEvent(event.target);
+          event.preventDefault();
+          return true;
+      });
+
       // Add event listner on all filter toggle buttons
       [].slice.call(filterTogglers).forEach(function(button){
         button.addEventListener('click', toggleFilters)
@@ -114,6 +120,10 @@
     container.classList.toggle('is-expanded-filters');
   }
 
+  function toggleFilterListCollapse(event) {
+    event.target.parentNode.parentNode.classList.toggle('is-collapsed');
+  }
+
   /**
    * Update te query parameters based on the filter change
    * 

class-ajax-filter-posts.php

@@ -51,7 +51,7 @@ class Ajax_Filter_Posts {
   public function __construct() {
 
     $this->plugin_name = 'ajax-filter-posts';
-    $this->version = '0.2.1';
+    $this->version = '0.3.0';
 
     add_action( 'plugins_loaded', [$this, 'load_textdomain'] );
     add_action( 'wp_enqueue_scripts', [$this,'add_scripts'] );

templates/partials/filters.php

@@ -1,12 +1,20 @@
 <?php foreach ($filterlists as $filterlist) : ?>
-  <h3><?= $filterlist['name'] ?></h3>
-  <ul>
-    <?php foreach ($filterlist['filters'] as $filter) : ?>
-      <li>
-        <a href="<?= get_term_link( $filter, $filter->taxonomy ); ?>" class="ajax-posts__filter" data-filter="<?= $filter->taxonomy; ?>" data-term="<?= $filter->slug; ?>">
-            <?= $filter->name; ?>
-        </a>
-      </li>
-    <?php endforeach; ?>
-  </ul>
+  <div class="ajax-posts__filterlist">
+    <h3><?= $filterlist['name'] ?></h3>
+    <ul>
+      <?php foreach ($filterlist['filters'] as $filter) : ?>
+        <li>
+          <a href="<?= get_term_link( $filter, $filter->taxonomy ); ?>" class="ajax-posts__filter" data-filter="<?= $filter->taxonomy; ?>" data-term="<?= $filter->slug; ?>">
+              <?= $filter->name; ?>
+          </a>
+        </li>
+      <?php endforeach; ?>
+    </ul>
+    <?php if (count($filterlist['filters']) >= 5): ?>
+      <div class="ajax-posts__filter-toggle">
+        <a href="#" class="js-collapse-filterlist ajax-posts__filter-toggle-show">Toon meer</a>
+        <a href="#" class="js-collapse-filterlist ajax-posts__filter-toggle-hide">Toon minder</a>
+      </div>
+  <?php endif; ?>
+  </div>
 <?php endforeach; ?>