Umsetzung

Das Beispiel hat zuerst eine HTML-Komponente. In diese liegt anschliessender Quellcode. Der Quellcode hat drei Bereiche:

1. HTML-Quelltext für die Navigations des Filters.
2. Wenig CSS zum Navigationslayout
3. JavaScript-Snippet zur Funktionalität des Filters.

Anschliessend sind mehrere Text/Bild-Komponenten erstellt, mit entsprechenden Themen. In den einzelnen Text/Bild-Komponenten sind Referenzen zur Navigation, resp. zu den einzelnen Themen (Kategorien), gesetzt.

Der JavaScript-Code ist nicht optimiert, dies ist nur ein Beispiel.

<div id="fNavigation">
    <div><input type='checkbox' id='fAll' /> Alle</div>
    <div id="fCategories">
        <div><input type='checkbox' class="categories" id='cat1' /> Cloud Computing</div>
        <div><input type='checkbox' class="categories" id='cat2' /> Programmiersprachen</div>
        <div><input type='checkbox' class="categories" id='cat3' /> Soziales Netzwerk</div>
        <div><input type='checkbox' class="categories" id='cat4' /> Data-Mining</div>
        <div><input type='checkbox' class="categories" id='cat5' /> Informationssicherheit</div>
        <div><input type='checkbox' class="categories" id='cat6' /> Internet der Dinge</div>
    </div>
</div>

<style>
 #fNavigation{max-width: 600px; }
 #fCategories {display: grid; grid-template-columns: 1fr 1fr 1fr; }
 #fCategories > div{display: "inline-block"; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Variables
  var contents = Array.from(document.querySelectorAll("section.ContentArea > div.TextImage")).filter(function(div) {
    return div.querySelector("p[class^='cat']");
  });

  // Function for "all" checkbox
  document.querySelector("#fAll").addEventListener('change', function() {
    var status = this.checked ? "block" : "none";

    // Reset any input fields
    Array.from(document.querySelectorAll("#fCategories input")).forEach(function(input) {
      input.checked = false;
    });

    // Show all content
    contents.forEach(function(value) {
      value.style.display = status;
    });
  });

  // Function for category checkbox
  Array.from(document.querySelectorAll("#fCategories > div")).forEach(function(div) {
      
    div.addEventListener('change', function() {
      // Reset the "all" input field
      document.querySelector("#fAll").checked = false;

      // Hide all content
      contents.forEach(function(value) {
        value.style.display = "none";
      });

      // Show specific elements
      Array.from( document.querySelectorAll("#fCategories input:checked")).forEach(function(checkedInput) {
        Array.from(document.querySelectorAll("section.ContentArea > div.TextImage")).filter(function(div) {
          return div.querySelector("p[class='" + checkedInput.getAttribute("id") + "']");
        }).forEach(function(selectedDiv) {
          selectedDiv.style.display = "block";
        });
      });
    });
  });
});

</script>

Interessant sind die <input> Zeilen mit den id="cat1" bis id="cat6" Attribut/Werten. Pro Checkbox ist solch ein id Attribute gesetzt, welches dann als Referenz in den folgenden Text/Bild-Komponenten verwendet wird. Am Zeilenende setzt man den Titel des Themas, wie z.B. "Cloud Computing".

Erweitert man die 6 Themen, dann ist es wichtig das Attribut id richtig zu setzen. Der Wert muss einmalig sein, dabei ist das Prefix cat notwendig und es soll mit einer Zahl erweitert werden, z.B. cat1.

In den einzelnen Text/Bild-Komponenten liegt eine Referenz auf da jeweilige Thema (id). Dieses Referenz liegt im <p> Element im Attribut class (s. Bildschirmfoto). Dieses Beispiel funktioniert nur mit einem <p> Element pro Text/Bild-Komponente.