diff --git a/docs/build_DEMOS.html b/docs/build_DEMOS.html
index 61d4a78..ee34b7f 100644
--- a/docs/build_DEMOS.html
+++ b/docs/build_DEMOS.html
@@ -10,6 +10,18 @@
     <script type="text/javascript" async
       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
     </script>
+    <script type="text/javascript">
+      window.addEventListener("load", () => {
+        for (let i of document.querySelectorAll(".collapse ul")) {
+          let tog = document.createElement("div");
+          tog.innerHTML = i.previousSibling.textContent;
+          tog.className = "toggle";
+          tog.onclick = () => tog.classList.toggle("show");
+          i.parentElement.removeChild(i.previousSibling);
+          i.parentElement.insertBefore(tog, i);
+        }
+      });
+    </script>
     <style>
     var {
       font-style: italics;
@@ -18,6 +30,18 @@
     td {
       vertical-align: top;
     }
+    [id^="togList"],                        /* HIDE CHECKBOX */
+    [id^="togList"] ~ .list,                /* HIDE LIST */
+    [id^="togList"] + label  span + span,   /* HIDE "Collapse" */
+    [id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
+      display:none;
+    }
+    [id^="togList"]:checked + label span + span{
+      display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
+    }
+    [id^="togList"]:checked ~ .list{
+      display:block;                        /* SHOW LIST (IF CHECKED) */
+    }
     </style>
   </head>
   <body>
@@ -59,17 +83,42 @@
       </div>
     </div>
     <div class="container-xl my-4">
-      <div class="card rounded">
-        <div class="card-header card-header-mod">
-          <div class="row d-flex flex-wrap align-items-center">
-            <div class="col-sm-3 col-md-5 mb-2 mb-sm-0">
-              <h3 class="d-inline-block mr-2">
-              Function&nbsp;Reference: <b><code>build_DEMOS</code></b>
-              </h3>
-            </div>
+      <div class="row flex-nowrap" style="min-height:0">
+        <div class="col-md-2 bg-light" style="overflow-y: scroll; width: 250px;">
+          <div class="p-2" style="text-align: center;">
+            <h3>Categories &</h3>
+            <h4 style="color: blue">Functions List</h4>
           </div>
-        </div>
-        <div class="card-body">
+			<div class="row">
+				<input id="togList1" type="checkbox" checked >
+				<label for="togList1">
+					<span><h5>Documentation</h5></span>
+					<span><h5>Documentation</h5></span>
+				</label>
+				<div class="list">
+				<ul style="list-style-type: none; padding-left: 20px;">
+					<li><a href="build_DEMOS.html" class="text-decoration-none fw-bolder">build_DEMOS</a></li>
+					<li><a href="classdef_texi2html.html" class="text-decoration-none">classdef_texi2html</a></li>
+					<li><a href="find_DEMOS.html" class="text-decoration-none">find_DEMOS</a></li>
+					<li><a href="find_GHurls.html" class="text-decoration-none">find_GHurls</a></li>
+					<li><a href="function_texi2html.html" class="text-decoration-none">function_texi2html</a></li>
+					<li><a href="list_packages.html" class="text-decoration-none">list_packages</a></li>
+					<li><a href="package_texi2html.html" class="text-decoration-none">package_texi2html</a></li>
+				</ul>
+			</div>
+			</div>
+
+			  </div>
+			  <div class="col-md-10">
+          <div class="card rounded">
+            <div class="card-header card-header-mod">
+              <div class="row d-flex flex-wrap align-items-center">
+                <h3 class="d-inline-block mr-2">
+                Function&nbsp;Reference: <b><code>build_DEMOS</code></b>
+                </h3>
+              </div>
+            </div>
+            <div class="card-body">
 <dl>
 <dt><u>pkg-octave-doc:</u> <var>html</var> = <b>build_DEMOS</b><i> (<var>fcnname</var>)</i></dt>
 </dl>
@@ -96,6 +145,8 @@ <h3 class="d-inline-block mr-2">
   <a href="https://github.com/gnu-octave/pkg-octave-doc/tree/main/inst/build_DEMOS.m">build_DEMOS</a>
 </div>
 
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/classdef_texi2html.html b/docs/classdef_texi2html.html
index d6d05f8..e098eaa 100644
--- a/docs/classdef_texi2html.html
+++ b/docs/classdef_texi2html.html
@@ -10,6 +10,18 @@
     <script type="text/javascript" async
       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
     </script>
+    <script type="text/javascript">
+      window.addEventListener("load", () => {
+        for (let i of document.querySelectorAll(".collapse ul")) {
+          let tog = document.createElement("div");
+          tog.innerHTML = i.previousSibling.textContent;
+          tog.className = "toggle";
+          tog.onclick = () => tog.classList.toggle("show");
+          i.parentElement.removeChild(i.previousSibling);
+          i.parentElement.insertBefore(tog, i);
+        }
+      });
+    </script>
     <style>
     var {
       font-style: italics;
@@ -18,6 +30,18 @@
     td {
       vertical-align: top;
     }
+    [id^="togList"],                        /* HIDE CHECKBOX */
+    [id^="togList"] ~ .list,                /* HIDE LIST */
+    [id^="togList"] + label  span + span,   /* HIDE "Collapse" */
+    [id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
+      display:none;
+    }
+    [id^="togList"]:checked + label span + span{
+      display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
+    }
+    [id^="togList"]:checked ~ .list{
+      display:block;                        /* SHOW LIST (IF CHECKED) */
+    }
     </style>
   </head>
   <body>
@@ -59,17 +83,42 @@
       </div>
     </div>
     <div class="container-xl my-4">
-      <div class="card rounded">
-        <div class="card-header card-header-mod">
-          <div class="row d-flex flex-wrap align-items-center">
-            <div class="col-sm-3 col-md-5 mb-2 mb-sm-0">
-              <h3 class="d-inline-block mr-2">
-              Function&nbsp;Reference: <b><code>classdef_texi2html</code></b>
-              </h3>
-            </div>
+      <div class="row flex-nowrap" style="min-height:0">
+        <div class="col-md-2 bg-light" style="overflow-y: scroll; width: 250px;">
+          <div class="p-2" style="text-align: center;">
+            <h3>Categories &</h3>
+            <h4 style="color: blue">Functions List</h4>
           </div>
-        </div>
-        <div class="card-body">
+			<div class="row">
+				<input id="togList1" type="checkbox" checked >
+				<label for="togList1">
+					<span><h5>Documentation</h5></span>
+					<span><h5>Documentation</h5></span>
+				</label>
+				<div class="list">
+				<ul style="list-style-type: none; padding-left: 20px;">
+					<li><a href="build_DEMOS.html" class="text-decoration-none">build_DEMOS</a></li>
+					<li><a href="classdef_texi2html.html" class="text-decoration-none fw-bolder">classdef_texi2html</a></li>
+					<li><a href="find_DEMOS.html" class="text-decoration-none">find_DEMOS</a></li>
+					<li><a href="find_GHurls.html" class="text-decoration-none">find_GHurls</a></li>
+					<li><a href="function_texi2html.html" class="text-decoration-none">function_texi2html</a></li>
+					<li><a href="list_packages.html" class="text-decoration-none">list_packages</a></li>
+					<li><a href="package_texi2html.html" class="text-decoration-none">package_texi2html</a></li>
+				</ul>
+			</div>
+			</div>
+
+			  </div>
+			  <div class="col-md-10">
+          <div class="card rounded">
+            <div class="card-header card-header-mod">
+              <div class="row d-flex flex-wrap align-items-center">
+                <h3 class="d-inline-block mr-2">
+                Function&nbsp;Reference: <b><code>classdef_texi2html</code></b>
+                </h3>
+              </div>
+            </div>
+            <div class="card-body">
 <dl>
 <dt><u>pkg-octave-doc:</u> <b>classdef_texi2html</b><i> (<var>clsname</var>, <var>pkgfcns</var>, <var>info</var>)</i></dt>
 </dl>
@@ -124,6 +173,8 @@ <h3 class="d-inline-block mr-2">
   <a href="https://github.com/gnu-octave/pkg-octave-doc/tree/main/inst/classdef_texi2html.m">classdef_texi2html</a>
 </div>
 
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/find_DEMOS.html b/docs/find_DEMOS.html
index 4592438..6af19c9 100644
--- a/docs/find_DEMOS.html
+++ b/docs/find_DEMOS.html
@@ -10,6 +10,18 @@
     <script type="text/javascript" async
       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
     </script>
+    <script type="text/javascript">
+      window.addEventListener("load", () => {
+        for (let i of document.querySelectorAll(".collapse ul")) {
+          let tog = document.createElement("div");
+          tog.innerHTML = i.previousSibling.textContent;
+          tog.className = "toggle";
+          tog.onclick = () => tog.classList.toggle("show");
+          i.parentElement.removeChild(i.previousSibling);
+          i.parentElement.insertBefore(tog, i);
+        }
+      });
+    </script>
     <style>
     var {
       font-style: italics;
@@ -18,6 +30,18 @@
     td {
       vertical-align: top;
     }
+    [id^="togList"],                        /* HIDE CHECKBOX */
+    [id^="togList"] ~ .list,                /* HIDE LIST */
+    [id^="togList"] + label  span + span,   /* HIDE "Collapse" */
+    [id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
+      display:none;
+    }
+    [id^="togList"]:checked + label span + span{
+      display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
+    }
+    [id^="togList"]:checked ~ .list{
+      display:block;                        /* SHOW LIST (IF CHECKED) */
+    }
     </style>
   </head>
   <body>
@@ -59,17 +83,42 @@
       </div>
     </div>
     <div class="container-xl my-4">
-      <div class="card rounded">
-        <div class="card-header card-header-mod">
-          <div class="row d-flex flex-wrap align-items-center">
-            <div class="col-sm-3 col-md-5 mb-2 mb-sm-0">
-              <h3 class="d-inline-block mr-2">
-              Function&nbsp;Reference: <b><code>find_DEMOS</code></b>
-              </h3>
-            </div>
+      <div class="row flex-nowrap" style="min-height:0">
+        <div class="col-md-2 bg-light" style="overflow-y: scroll; width: 250px;">
+          <div class="p-2" style="text-align: center;">
+            <h3>Categories &</h3>
+            <h4 style="color: blue">Functions List</h4>
           </div>
-        </div>
-        <div class="card-body">
+			<div class="row">
+				<input id="togList1" type="checkbox" checked >
+				<label for="togList1">
+					<span><h5>Documentation</h5></span>
+					<span><h5>Documentation</h5></span>
+				</label>
+				<div class="list">
+				<ul style="list-style-type: none; padding-left: 20px;">
+					<li><a href="build_DEMOS.html" class="text-decoration-none">build_DEMOS</a></li>
+					<li><a href="classdef_texi2html.html" class="text-decoration-none">classdef_texi2html</a></li>
+					<li><a href="find_DEMOS.html" class="text-decoration-none fw-bolder">find_DEMOS</a></li>
+					<li><a href="find_GHurls.html" class="text-decoration-none">find_GHurls</a></li>
+					<li><a href="function_texi2html.html" class="text-decoration-none">function_texi2html</a></li>
+					<li><a href="list_packages.html" class="text-decoration-none">list_packages</a></li>
+					<li><a href="package_texi2html.html" class="text-decoration-none">package_texi2html</a></li>
+				</ul>
+			</div>
+			</div>
+
+			  </div>
+			  <div class="col-md-10">
+          <div class="card rounded">
+            <div class="card-header card-header-mod">
+              <div class="row d-flex flex-wrap align-items-center">
+                <h3 class="d-inline-block mr-2">
+                Function&nbsp;Reference: <b><code>find_DEMOS</code></b>
+                </h3>
+              </div>
+            </div>
+            <div class="card-body">
 <dl>
 <dt><u>pkg-octave-doc:</u> <var>demos</var> = <b>find_DEMOS</b><i> (<var>fcnname</var>)</i></dt>
 </dl>
@@ -96,6 +145,8 @@ <h3 class="d-inline-block mr-2">
   <a href="https://github.com/gnu-octave/pkg-octave-doc/tree/main/inst/find_DEMOS.m">find_DEMOS</a>
 </div>
 
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/find_GHurls.html b/docs/find_GHurls.html
index b252781..8638851 100644
--- a/docs/find_GHurls.html
+++ b/docs/find_GHurls.html
@@ -10,6 +10,18 @@
     <script type="text/javascript" async
       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
     </script>
+    <script type="text/javascript">
+      window.addEventListener("load", () => {
+        for (let i of document.querySelectorAll(".collapse ul")) {
+          let tog = document.createElement("div");
+          tog.innerHTML = i.previousSibling.textContent;
+          tog.className = "toggle";
+          tog.onclick = () => tog.classList.toggle("show");
+          i.parentElement.removeChild(i.previousSibling);
+          i.parentElement.insertBefore(tog, i);
+        }
+      });
+    </script>
     <style>
     var {
       font-style: italics;
@@ -18,6 +30,18 @@
     td {
       vertical-align: top;
     }
+    [id^="togList"],                        /* HIDE CHECKBOX */
+    [id^="togList"] ~ .list,                /* HIDE LIST */
+    [id^="togList"] + label  span + span,   /* HIDE "Collapse" */
+    [id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
+      display:none;
+    }
+    [id^="togList"]:checked + label span + span{
+      display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
+    }
+    [id^="togList"]:checked ~ .list{
+      display:block;                        /* SHOW LIST (IF CHECKED) */
+    }
     </style>
   </head>
   <body>
@@ -59,17 +83,42 @@
       </div>
     </div>
     <div class="container-xl my-4">
-      <div class="card rounded">
-        <div class="card-header card-header-mod">
-          <div class="row d-flex flex-wrap align-items-center">
-            <div class="col-sm-3 col-md-5 mb-2 mb-sm-0">
-              <h3 class="d-inline-block mr-2">
-              Function&nbsp;Reference: <b><code>find_GHurls</code></b>
-              </h3>
-            </div>
+      <div class="row flex-nowrap" style="min-height:0">
+        <div class="col-md-2 bg-light" style="overflow-y: scroll; width: 250px;">
+          <div class="p-2" style="text-align: center;">
+            <h3>Categories &</h3>
+            <h4 style="color: blue">Functions List</h4>
           </div>
-        </div>
-        <div class="card-body">
+			<div class="row">
+				<input id="togList1" type="checkbox" checked >
+				<label for="togList1">
+					<span><h5>Documentation</h5></span>
+					<span><h5>Documentation</h5></span>
+				</label>
+				<div class="list">
+				<ul style="list-style-type: none; padding-left: 20px;">
+					<li><a href="build_DEMOS.html" class="text-decoration-none">build_DEMOS</a></li>
+					<li><a href="classdef_texi2html.html" class="text-decoration-none">classdef_texi2html</a></li>
+					<li><a href="find_DEMOS.html" class="text-decoration-none">find_DEMOS</a></li>
+					<li><a href="find_GHurls.html" class="text-decoration-none fw-bolder">find_GHurls</a></li>
+					<li><a href="function_texi2html.html" class="text-decoration-none">function_texi2html</a></li>
+					<li><a href="list_packages.html" class="text-decoration-none">list_packages</a></li>
+					<li><a href="package_texi2html.html" class="text-decoration-none">package_texi2html</a></li>
+				</ul>
+			</div>
+			</div>
+
+			  </div>
+			  <div class="col-md-10">
+          <div class="card rounded">
+            <div class="card-header card-header-mod">
+              <div class="row d-flex flex-wrap align-items-center">
+                <h3 class="d-inline-block mr-2">
+                Function&nbsp;Reference: <b><code>find_GHurls</code></b>
+                </h3>
+              </div>
+            </div>
+            <div class="card-body">
 <dl>
 <dt><u>pkg-octave-doc:</u> <var>pkgfcns</var> = <b>find_GHurls</b><i> (<var>pkgurl</var>, <var>pkgfcns</var>)</i></dt>
 </dl>
@@ -110,6 +159,8 @@ <h3 class="d-inline-block mr-2">
   <a href="https://github.com/gnu-octave/pkg-octave-doc/tree/main/inst/find_GHurls.m">find_GHurls</a>
 </div>
 
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/function_texi2html.html b/docs/function_texi2html.html
index 56df994..b624c32 100644
--- a/docs/function_texi2html.html
+++ b/docs/function_texi2html.html
@@ -10,6 +10,18 @@
     <script type="text/javascript" async
       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
     </script>
+    <script type="text/javascript">
+      window.addEventListener("load", () => {
+        for (let i of document.querySelectorAll(".collapse ul")) {
+          let tog = document.createElement("div");
+          tog.innerHTML = i.previousSibling.textContent;
+          tog.className = "toggle";
+          tog.onclick = () => tog.classList.toggle("show");
+          i.parentElement.removeChild(i.previousSibling);
+          i.parentElement.insertBefore(tog, i);
+        }
+      });
+    </script>
     <style>
     var {
       font-style: italics;
@@ -18,6 +30,18 @@
     td {
       vertical-align: top;
     }
+    [id^="togList"],                        /* HIDE CHECKBOX */
+    [id^="togList"] ~ .list,                /* HIDE LIST */
+    [id^="togList"] + label  span + span,   /* HIDE "Collapse" */
+    [id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
+      display:none;
+    }
+    [id^="togList"]:checked + label span + span{
+      display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
+    }
+    [id^="togList"]:checked ~ .list{
+      display:block;                        /* SHOW LIST (IF CHECKED) */
+    }
     </style>
   </head>
   <body>
@@ -59,17 +83,42 @@
       </div>
     </div>
     <div class="container-xl my-4">
-      <div class="card rounded">
-        <div class="card-header card-header-mod">
-          <div class="row d-flex flex-wrap align-items-center">
-            <div class="col-sm-3 col-md-5 mb-2 mb-sm-0">
-              <h3 class="d-inline-block mr-2">
-              Function&nbsp;Reference: <b><code>function_texi2html</code></b>
-              </h3>
-            </div>
+      <div class="row flex-nowrap" style="min-height:0">
+        <div class="col-md-2 bg-light" style="overflow-y: scroll; width: 250px;">
+          <div class="p-2" style="text-align: center;">
+            <h3>Categories &</h3>
+            <h4 style="color: blue">Functions List</h4>
           </div>
-        </div>
-        <div class="card-body">
+			<div class="row">
+				<input id="togList1" type="checkbox" checked >
+				<label for="togList1">
+					<span><h5>Documentation</h5></span>
+					<span><h5>Documentation</h5></span>
+				</label>
+				<div class="list">
+				<ul style="list-style-type: none; padding-left: 20px;">
+					<li><a href="build_DEMOS.html" class="text-decoration-none">build_DEMOS</a></li>
+					<li><a href="classdef_texi2html.html" class="text-decoration-none">classdef_texi2html</a></li>
+					<li><a href="find_DEMOS.html" class="text-decoration-none">find_DEMOS</a></li>
+					<li><a href="find_GHurls.html" class="text-decoration-none">find_GHurls</a></li>
+					<li><a href="function_texi2html.html" class="text-decoration-none fw-bolder">function_texi2html</a></li>
+					<li><a href="list_packages.html" class="text-decoration-none">list_packages</a></li>
+					<li><a href="package_texi2html.html" class="text-decoration-none">package_texi2html</a></li>
+				</ul>
+			</div>
+			</div>
+
+			  </div>
+			  <div class="col-md-10">
+          <div class="card rounded">
+            <div class="card-header card-header-mod">
+              <div class="row d-flex flex-wrap align-items-center">
+                <h3 class="d-inline-block mr-2">
+                Function&nbsp;Reference: <b><code>function_texi2html</code></b>
+                </h3>
+              </div>
+            </div>
+            <div class="card-body">
 <dl>
 <dt><u>pkg-octave-doc:</u> <b>function_texi2html</b><i> (<var>fcnname</var>, <var>pkgfcns</var>, <var>info</var>)</i></dt>
 </dl>
@@ -124,6 +173,8 @@ <h3 class="d-inline-block mr-2">
   <a href="https://github.com/gnu-octave/pkg-octave-doc/tree/main/inst/function_texi2html.m">function_texi2html</a>
 </div>
 
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/index.html b/docs/index.html
index f41091b..e58845b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,6 +10,18 @@
     <script type="text/javascript" async
       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
     </script>
+    <script type="text/javascript">
+      window.addEventListener("load", () => {
+        for (let i of document.querySelectorAll(".collapse ul")) {
+          let tog = document.createElement("div");
+          tog.innerHTML = i.previousSibling.textContent;
+          tog.className = "toggle";
+          tog.onclick = () => tog.classList.toggle("show");
+          i.parentElement.removeChild(i.previousSibling);
+          i.parentElement.insertBefore(tog, i);
+        }
+      });
+    </script>
     <style>
     var {
       font-style: italics;
@@ -18,6 +30,18 @@
     td {
       vertical-align: top;
     }
+    [id^="togList"],                        /* HIDE CHECKBOX */
+    [id^="togList"] ~ .list,                /* HIDE LIST */
+    [id^="togList"] + label  span + span,   /* HIDE "Collapse" */
+    [id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
+      display:none;
+    }
+    [id^="togList"]:checked + label span + span{
+      display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
+    }
+    [id^="togList"]:checked ~ .list{
+      display:block;                        /* SHOW LIST (IF CHECKED) */
+    }
     </style>
   </head>
   <body>
@@ -61,7 +85,7 @@
             </div>
             <div class="col-sm-9 col-md-10">
               <h3 class="d-inline-block mr-2">pkg-octave-doc</h3>
-              <b>0.5.3&nbsp;2024-01-28</b>
+              <b>0.5.4&nbsp;2024-05-17</b>
               <p class="indent">
                 This package provides functions for generating HTML pages that  contain the help texts of the functions of an octave package. The package is  designed to work with installed packages and use their INDEX file for creating  the respective functions' HTML pages. The default layout is based on boootstrap  5 and it follows the design of the Octave Packages GitHub page.
               </p>
diff --git a/docs/list_packages.html b/docs/list_packages.html
index b9a938c..1514b98 100644
--- a/docs/list_packages.html
+++ b/docs/list_packages.html
@@ -10,6 +10,18 @@
     <script type="text/javascript" async
       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
     </script>
+    <script type="text/javascript">
+      window.addEventListener("load", () => {
+        for (let i of document.querySelectorAll(".collapse ul")) {
+          let tog = document.createElement("div");
+          tog.innerHTML = i.previousSibling.textContent;
+          tog.className = "toggle";
+          tog.onclick = () => tog.classList.toggle("show");
+          i.parentElement.removeChild(i.previousSibling);
+          i.parentElement.insertBefore(tog, i);
+        }
+      });
+    </script>
     <style>
     var {
       font-style: italics;
@@ -18,6 +30,18 @@
     td {
       vertical-align: top;
     }
+    [id^="togList"],                        /* HIDE CHECKBOX */
+    [id^="togList"] ~ .list,                /* HIDE LIST */
+    [id^="togList"] + label  span + span,   /* HIDE "Collapse" */
+    [id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
+      display:none;
+    }
+    [id^="togList"]:checked + label span + span{
+      display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
+    }
+    [id^="togList"]:checked ~ .list{
+      display:block;                        /* SHOW LIST (IF CHECKED) */
+    }
     </style>
   </head>
   <body>
@@ -59,17 +83,42 @@
       </div>
     </div>
     <div class="container-xl my-4">
-      <div class="card rounded">
-        <div class="card-header card-header-mod">
-          <div class="row d-flex flex-wrap align-items-center">
-            <div class="col-sm-3 col-md-5 mb-2 mb-sm-0">
-              <h3 class="d-inline-block mr-2">
-              Function&nbsp;Reference: <b><code>list_packages</code></b>
-              </h3>
-            </div>
+      <div class="row flex-nowrap" style="min-height:0">
+        <div class="col-md-2 bg-light" style="overflow-y: scroll; width: 250px;">
+          <div class="p-2" style="text-align: center;">
+            <h3>Categories &</h3>
+            <h4 style="color: blue">Functions List</h4>
           </div>
-        </div>
-        <div class="card-body">
+			<div class="row">
+				<input id="togList1" type="checkbox" checked >
+				<label for="togList1">
+					<span><h5>Documentation</h5></span>
+					<span><h5>Documentation</h5></span>
+				</label>
+				<div class="list">
+				<ul style="list-style-type: none; padding-left: 20px;">
+					<li><a href="build_DEMOS.html" class="text-decoration-none">build_DEMOS</a></li>
+					<li><a href="classdef_texi2html.html" class="text-decoration-none">classdef_texi2html</a></li>
+					<li><a href="find_DEMOS.html" class="text-decoration-none">find_DEMOS</a></li>
+					<li><a href="find_GHurls.html" class="text-decoration-none">find_GHurls</a></li>
+					<li><a href="function_texi2html.html" class="text-decoration-none">function_texi2html</a></li>
+					<li><a href="list_packages.html" class="text-decoration-none fw-bolder">list_packages</a></li>
+					<li><a href="package_texi2html.html" class="text-decoration-none">package_texi2html</a></li>
+				</ul>
+			</div>
+			</div>
+
+			  </div>
+			  <div class="col-md-10">
+          <div class="card rounded">
+            <div class="card-header card-header-mod">
+              <div class="row d-flex flex-wrap align-items-center">
+                <h3 class="d-inline-block mr-2">
+                Function&nbsp;Reference: <b><code>list_packages</code></b>
+                </h3>
+              </div>
+            </div>
+            <div class="card-body">
 <dl>
 <dt><u>pkg-octave-doc:</u> <var>valid_packages</var> = <b>list_packages</b><i> ()</i></dt>
 </dl>
@@ -87,6 +136,8 @@ <h3 class="d-inline-block mr-2">
 </div>
 
 
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/package_texi2html.html b/docs/package_texi2html.html
index 79dbbd7..c993147 100644
--- a/docs/package_texi2html.html
+++ b/docs/package_texi2html.html
@@ -10,6 +10,18 @@
     <script type="text/javascript" async
       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
     </script>
+    <script type="text/javascript">
+      window.addEventListener("load", () => {
+        for (let i of document.querySelectorAll(".collapse ul")) {
+          let tog = document.createElement("div");
+          tog.innerHTML = i.previousSibling.textContent;
+          tog.className = "toggle";
+          tog.onclick = () => tog.classList.toggle("show");
+          i.parentElement.removeChild(i.previousSibling);
+          i.parentElement.insertBefore(tog, i);
+        }
+      });
+    </script>
     <style>
     var {
       font-style: italics;
@@ -18,6 +30,18 @@
     td {
       vertical-align: top;
     }
+    [id^="togList"],                        /* HIDE CHECKBOX */
+    [id^="togList"] ~ .list,                /* HIDE LIST */
+    [id^="togList"] + label  span + span,   /* HIDE "Collapse" */
+    [id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
+      display:none;
+    }
+    [id^="togList"]:checked + label span + span{
+      display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
+    }
+    [id^="togList"]:checked ~ .list{
+      display:block;                        /* SHOW LIST (IF CHECKED) */
+    }
     </style>
   </head>
   <body>
@@ -59,17 +83,42 @@
       </div>
     </div>
     <div class="container-xl my-4">
-      <div class="card rounded">
-        <div class="card-header card-header-mod">
-          <div class="row d-flex flex-wrap align-items-center">
-            <div class="col-sm-3 col-md-5 mb-2 mb-sm-0">
-              <h3 class="d-inline-block mr-2">
-              Function&nbsp;Reference: <b><code>package_texi2html</code></b>
-              </h3>
-            </div>
+      <div class="row flex-nowrap" style="min-height:0">
+        <div class="col-md-2 bg-light" style="overflow-y: scroll; width: 250px;">
+          <div class="p-2" style="text-align: center;">
+            <h3>Categories &</h3>
+            <h4 style="color: blue">Functions List</h4>
           </div>
-        </div>
-        <div class="card-body">
+			<div class="row">
+				<input id="togList1" type="checkbox" checked >
+				<label for="togList1">
+					<span><h5>Documentation</h5></span>
+					<span><h5>Documentation</h5></span>
+				</label>
+				<div class="list">
+				<ul style="list-style-type: none; padding-left: 20px;">
+					<li><a href="build_DEMOS.html" class="text-decoration-none">build_DEMOS</a></li>
+					<li><a href="classdef_texi2html.html" class="text-decoration-none">classdef_texi2html</a></li>
+					<li><a href="find_DEMOS.html" class="text-decoration-none">find_DEMOS</a></li>
+					<li><a href="find_GHurls.html" class="text-decoration-none">find_GHurls</a></li>
+					<li><a href="function_texi2html.html" class="text-decoration-none">function_texi2html</a></li>
+					<li><a href="list_packages.html" class="text-decoration-none">list_packages</a></li>
+					<li><a href="package_texi2html.html" class="text-decoration-none fw-bolder">package_texi2html</a></li>
+				</ul>
+			</div>
+			</div>
+
+			  </div>
+			  <div class="col-md-10">
+          <div class="card rounded">
+            <div class="card-header card-header-mod">
+              <div class="row d-flex flex-wrap align-items-center">
+                <h3 class="d-inline-block mr-2">
+                Function&nbsp;Reference: <b><code>package_texi2html</code></b>
+                </h3>
+              </div>
+            </div>
+            <div class="card-body">
 <dl>
 <dt><u>pkg-octave-doc:</u> <b>package_texi2html</b><i> (<var>pkgname</var>)</i></dt>
 <dt><u>pkg-octave-doc:</u> [<var>pkgfcns</var>, <var>info</var>] = <b>package_texi2html</b><i> (<var>pkgname</var>)</i></dt>
@@ -150,6 +199,8 @@ <h3 class="d-inline-block mr-2">
   <a href="https://github.com/gnu-octave/pkg-octave-doc/tree/main/inst/package_texi2html.m">package_texi2html</a>
 </div>
 
+            </div>
+          </div>
         </div>
       </div>
     </div>
