3 files changed, 154 insertions, 2 deletions
diff --git a/web/html.html b/web/html.html
index c58c523..94a9c76 100644
--- a/web/html.html
+++ b/web/html.html
@@ -307,6 +307,7 @@ window.onload = () =&gt; {
 &lt;/div&gt;
 </code></pre>
 <h1 id="minimal-tags-filter"><a class="header" href="#minimal-tags-filter">Minimal tags filter</a></h1>
+<h2 id="single-active-filter-tag"><a class="header" href="#single-active-filter-tag">Single active filter tag</a></h2>
 <p><a href="src/tags.html">Rendered html</a></p>
 <pre><code class="language-html">&lt;script&gt;
 /// Map HTML elements to display kinds.
@@ -369,6 +370,83 @@ window.onload = () =&gt; {
 &lt;div class = "content arm x86"&gt;arm x86&lt;/div&gt;
 &lt;div class = "content x86"&gt;x86&lt;/div&gt;
 </code></pre>
+<h2 id="multiple-active-filter-tags"><a class="header" href="#multiple-active-filter-tags">Multiple active filter tags</a></h2>
+<p><a href="src/tags2.html">Rendered html</a></p>
+<pre><code class="language-html">&lt;script&gt;
+/// Map HTML elements to display kinds.
+const elementToDisplay = (E) =&gt; {
+    switch (E.nodeName) {
+        case "LI":
+            return "list-item";
+        default:
+            return "block";
+    }
+}
+
+/// Display only elements which have all TAGS.
+const showTag = (TAGS) =&gt; {
+    Array.from(document.getElementsByClassName("content")).forEach(E =&gt; {
+        // Display the element, iff the element contains every tag T in TAGS.
+        if (TAGS.every(T =&gt; Array.from(E.classList).includes(T))) {
+            E.style.display = elementToDisplay(E);
+        } else {
+            E.style.display = "none";
+        }
+    });
+};
+
+/// Initialize buttons and callbacks.
+window.onload = () =&gt; {
+    // Handle to the filter placeholder.
+    const filter_node = document.getElementById("filter");
+    // Active filter tags.
+    const filter = Array();
+
+    // Create buttons for each tag T.
+    ["arm", "x86", "clear"].forEach(T =&gt; {
+        const btn = document.createElement("button");
+        btn.innerHTML = T;
+        btn.onclick = T === "clear"
+            ? (E) =&gt; {
+                // Clear active filter.
+                while (filter.length) { filter.pop(); }
+
+                showTag(["content"]);
+                filter_node.innerHTML = "&lt;p&gt;filter:&lt;/p&gt;";
+            }
+            : (E) =&gt; {
+                // Toggle tag T in Active filter.
+                if ((idx = filter.indexOf(T)) &gt; -1) {
+                    filter.splice(idx, 1);
+                } else {
+                    filter.push(T);
+                }
+
+                showTag(filter);
+                out = filter.map(T =&gt; `&lt;mark&gt;${T}&lt;/mark&gt;`).join(" + ");
+                filter_node.innerHTML = `&lt;p&gt;filter: ${out}&lt;/p&gt;`;
+            };
+
+        document.body.prepend(btn);
+    });
+}
+&lt;/script&gt;
+
+&lt;div id = "filter"&gt;&lt;p&gt;filter:&lt;/p&gt;&lt;/div&gt;
+
+&lt;ul&gt;
+    &lt;li class = "content arm"&gt;arm 1&lt;/li&gt;
+    &lt;li class = "content arm"&gt;arm 2&lt;/li&gt;
+    &lt;li class = "content arm"&gt;arm 3&lt;/li&gt;
+    &lt;li class = "content x86"&gt;x86 1&lt;/li&gt;
+    &lt;li class = "content x86"&gt;x86 2&lt;/li&gt;
+    &lt;li class = "content x86 arm"&gt;x86 + arm&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;div class = "content arm"&gt;arm&lt;/div&gt;
+&lt;div class = "content arm x86"&gt;arm x86&lt;/div&gt;
+&lt;div class = "content x86"&gt;x86&lt;/div&gt;
+</code></pre>
 <h1 id="floating-figures-with-caption"><a class="header" href="#floating-figures-with-caption">Floating figures with caption</a></h1>
 <p><a href="src/figure.html">Rendered html</a></p>
 <pre><code class="language-html">&lt;style&gt;
@@ -463,7 +541,7 @@ etiam non quam lacus suspendisse faucibus interdum posuere.
 &lt;/figure&gt;
 &lt;code&gt;overflow: auto&lt;/code&gt; gives an alternative to &lt;code&gt;clear&lt;/code&gt; to
 control placement of the floats. The red boarder visualizes the size of the
-&lt;code&gt;&amp;ltdiv&amp;gt&lt;/code&gt; block, you can remove the &lt;code&gt;overflow&lt;/code&gt; property
+&lt;code&gt;&amp;ltdiv&amp;gt&lt;/code&gt; block. One can remove the &lt;code&gt;overflow&lt;/code&gt; property
 and observe how the border changes.
 &lt;/div&gt;
 
diff --git a/web/src/figure.html b/web/src/figure.html
index ebcdf58..73502d0 100644
--- a/web/src/figure.html
+++ b/web/src/figure.html
@@ -90,7 +90,7 @@ etiam non quam lacus suspendisse faucibus interdum posuere.
 </figure>
 <code>overflow: auto</code> gives an alternative to <code>clear</code> to
 control placement of the floats. The red boarder visualizes the size of the
-<code>&ltdiv&gt</code> block, you can remove the <code>overflow</code> property
+<code>&ltdiv&gt</code> block. One can remove the <code>overflow</code> property
 and observe how the border changes.
 </div>
 
diff --git a/web/src/tags2.html b/web/src/tags2.html
new file mode 100644
index 0000000..a321aeb
--- /dev/null
+++ b/web/src/tags2.html
@@ -0,0 +1,74 @@
+<script>
+/// Map HTML elements to display kinds.
+const elementToDisplay = (E) => {
+    switch (E.nodeName) {
+        case "LI":
+            return "list-item";
+        default:
+            return "block";
+    }
+}
+
+/// Display only elements which have all TAGS.
+const showTag = (TAGS) => {
+    Array.from(document.getElementsByClassName("content")).forEach(E => {
+        // Display the element, iff the element contains every tag T in TAGS.
+        if (TAGS.every(T => Array.from(E.classList).includes(T))) {
+            E.style.display = elementToDisplay(E);
+        } else {
+            E.style.display = "none";
+        }
+    });
+};
+
+/// Initialize buttons and callbacks.
+window.onload = () => {
+    // Handle to the filter placeholder.
+    const filter_node = document.getElementById("filter");
+    // Active filter tags.
+    const filter = Array();
+
+    // Create buttons for each tag T.
+    ["arm", "x86", "clear"].forEach(T => {
+        const btn = document.createElement("button");
+        btn.innerHTML = T;
+        btn.onclick = T === "clear"
+            ? (E) => {
+                // Clear active filter.
+                while (filter.length) { filter.pop(); }
+
+                showTag(["content"]);
+                filter_node.innerHTML = "<p>filter:</p>";
+            }
+            : (E) => {
+                // Toggle tag T in Active filter.
+                if ((idx = filter.indexOf(T)) > -1) {
+                    filter.splice(idx, 1);
+                } else {
+                    filter.push(T);
+                }
+
+                showTag(filter);
+                out = filter.map(T => `<mark>${T}</mark>`).join(" + ");
+                filter_node.innerHTML = `<p>filter: ${out}</p>`;
+            };
+
+        document.body.prepend(btn);
+    });
+}
+</script>
+
+<div id = "filter"><p>filter:</p></div>
+
+<ul>
+    <li class = "content arm">arm 1</li>
+    <li class = "content arm">arm 2</li>
+    <li class = "content arm">arm 3</li>
+    <li class = "content x86">x86 1</li>
+    <li class = "content x86">x86 2</li>
+    <li class = "content x86 arm">x86 + arm</li>
+</ul>
+
+<div class = "content arm">arm</div>
+<div class = "content arm x86">arm x86</div>
+<div class = "content x86">x86</div>