diff --git a/_includes/scripts.html b/_includes/scripts.html
index 3f2ef451a5846f116d8af07dac0d67e5c9993f48..00ab2a82327371ccf55fe818fc70b0ede6a70ddd 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,2 +1,8 @@
 <script type="text/javascript" src="https://analytics.lcsb.uni.lu/lap/static/js/jquery.min.js"></script>
-<script type="text/javascript" src="{{ "assets/js/router.js" | relative_url }}"></script>
\ No newline at end of file
+<script type="text/javascript" src="{{ "assets/js/router.js" | relative_url }}"></script>
+<script type="text/javascript" src="{{ "assets/js/box_hider.js" | relative_url }}"></script>
+<script>
+window.addEventListener('load', function() {
+    window.boxHider.Trigger();
+})
+</script>
diff --git a/assets/js/box_hider.js b/assets/js/box_hider.js
new file mode 100644
index 0000000000000000000000000000000000000000..968f12fbe54cb18f7e2c0db8b3964b5be35df9da
--- /dev/null
+++ b/assets/js/box_hider.js
@@ -0,0 +1,89 @@
+/** 
+ * This is used to hide the sections of the index page
+ * based on the URL fragment (a.k.a. "hash")
+ */
+window.boxHider = (function() {
+    function GetSelectedId() {
+        var boxId = window.location.hash;
+        if (boxId.length > 0) {
+            return boxId.substring(1);
+        }
+        return "";
+    }
+
+    function GetAllBoxElements() {
+        return document.getElementsByClassName('index-box');
+    }
+
+    function GetAllBoxElementsArray() {
+        var allBoxes = GetAllBoxElements();
+        var allBoxesArray = Array.prototype.slice.call(allBoxes);
+        return allBoxesArray;
+    }
+
+    function GetSelectedBoxElement(id) {
+        var allBoxesArray = GetAllBoxElementsArray();
+        var element = document.getElementById(id);
+        
+        if (allBoxesArray.includes(element)) {
+            return element;
+        } 
+
+        return false;
+    }
+
+    function HideElement(element) {
+        if (element instanceof HTMLElement) {
+            element.style['display'] = 'none';
+        }
+    }
+
+    function UnhideElement(element) {
+        if (element instanceof HTMLElement) {
+            element.style['display'] = 'block';
+        }
+    }
+
+    function HideAllCategories() {
+        var allCategoriesElement = document.getElementById('all-categories');
+        HideElement(allCategoriesElement);
+    }
+
+    function ShowAllBoxes() {
+        var allBoxes = GetAllBoxElementsArray();
+        allBoxes.map(function(box) {
+            UnhideElement(box);
+        });
+    }
+
+    function Trigger() {
+        // First, try to get the hash from the URL (https://example.com/uri?param#hash)
+        var boxId = GetSelectedId();
+        if (boxId.length == 0) {
+            // If there is no hash in the URL, just show all the boxes
+            ShowAllBoxes(); 
+            return;
+        }
+        // Otherwise, proceed to getting the corresponding div element
+        var selectedBox = GetSelectedBoxElement(boxId);
+        if (selectedBox == false) {
+            // If the user selection is not a `div.index-box`, then just show all the boxes
+            ShowAllBoxes();
+            return;
+        }
+        // Hide the "All Categories" element
+        HideAllCategories();
+        // Finally, hide all boxes except of the selected one
+        var allBoxes = GetAllBoxElementsArray();
+        allBoxes.map(function(box) {
+            if (box != selectedBox) {
+                HideElement(box);
+            }
+        });
+    }
+
+    return {
+        'Trigger': Trigger,
+        'ShowAllBoxes': ShowAllBoxes
+    }
+})();
diff --git a/index.md b/index.md
index b6dff3f7ccfe0fa10eb22aa81e4e38d897b13010..a83961b4c97c9210f6697f83b2c1833cb6b6b5fc 100644
--- a/index.md
+++ b/index.md
@@ -65,4 +65,4 @@ The How-to cards are intended to provide practical guidance in implementing Data
 
 		</ul>
 	</div>
-</div>
\ No newline at end of file
+</div>