diff --git a/gray-theme/left.cgi b/gray-theme/left.cgi
index b86fc62f1..216daee08 100755
--- a/gray-theme/left.cgi
+++ b/gray-theme/left.cgi
@@ -17,7 +17,6 @@ require "gray-theme/theme.pl";
 ReadParse();
 
 popup_header("Virtualmin");
-print "<script type='text/javascript' src='@{[&get_webprefix()]}/unauthenticated/toggleview.js'></script>\n";
 
 my $is_master;
 # Is this user root?
@@ -83,7 +82,7 @@ if (@has > 1) {
 	print "</div>";
 	}
 
-print "<div class='wrapper'>\n";
+print "<div class='wrapper leftmenu'>\n";
 print "<table id='main' width='100%'><tbody><tr><td>\n";
 
 my $selwidth = (get_left_frame_width() - 70)."px";
@@ -201,18 +200,10 @@ foreach my $item (@$items) {
 	elsif ($item->{'type'} eq 'cat') {
 		# Start of a new category
 		my $c = $item->{'id'};
-		print "<div class='linkwithicon'>";
-		print "<a href=\"javascript:toggleview('cat$c','toggle$c')\" ".
-		      "id='toggle$c'><img border='0' src='images/closed.gif' ".
-		      "alt='[+]'></a>\n";
-		print "<div class='aftericon'>".
-		      "<a href=\"javascript:toggleview('cat$c','toggle$c')\" ".
-		      "id='toggletext$c'>".
-		      "<font color='#000000'>$item->{'desc'}</font></a></div>";
-		print "</div>\n";
-		print "<div class='itemhidden' id='cat$c'>\n";
+		print "<details>";
+		print "<summary><span>$item->{'desc'}</span></summary>";
 		show_menu_items_list($item->{'members'}, $indent+1);
-		print "</div>\n";
+		print "</details>\n";
 		}
 	elsif ($item->{'type'} eq 'html') {
 		# Some HTML block
diff --git a/gray-theme/left.css b/gray-theme/left.css
deleted file mode 100644
index 3b421ba65..000000000
--- a/gray-theme/left.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.mode {
-  left: auto;
-  right: auto;
-}
-.linkwithicon {
-  position: relative;
-  white-space: nowrap;
-  left: 2px;
-  width: 16px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-.linkwithicon img, .mode img {
-  margin-bottom: -2px;
-}
-.leftlink {
-  position: relative;
-  left: 4px;
-  right: 4px;
-  line-height: 1.6em;
-}
-.linkindented {
-  border: none;
-  position: relative;
-  margin-right: 2px;
-  margin-left: 20px;
-  line-height: 1.6em;
-}
-.linkwithicon.inactive a,
-.linkindented.inactive a {
-  /* pointer-events: none; */
-  filter: grayscale(1);
-  opacity: .75;
-}
-.linkindented.inactive {
-  white-space: pre;
-}
-.linkwithicon.inactive sub,
-.linkindented.inactive sub {
-  vertical-align: top;
-}
-.aftericon {
-  display: inline;
-}
-.domainmenu {
-  white-space: nowrap;
-  position: relative;
-  left: 4px;
-  padding-top: 2px;
-}
diff --git a/gray-theme/unauthenticated/gray-theme.css b/gray-theme/unauthenticated/gray-theme.css
index 527c8da1a..b39245ab1 100644
--- a/gray-theme/unauthenticated/gray-theme.css
+++ b/gray-theme/unauthenticated/gray-theme.css
@@ -311,4 +311,26 @@ br[data-x-br] {
 
 form[action="config_save.cgi"] #sortableTable2 > thead > tr > td {
     text-align: center;
-}
\ No newline at end of file
+}
+
+.leftmenu details > summary {
+  cursor: pointer;
+}
+.leftmenu details > summary::marker {
+  color: #bbb;
+  font-size: 120%;
+}
+.leftmenu details > summary  span {
+  padding-left: 2px;
+  white-space: nowrap;
+  color: #000;
+}
+
+.leftmenu details {
+  padding-left: 6px;
+  padding-bottom: 4px;
+}
+
+.leftmenu details .linkindented {
+  margin-left: 16px;
+}
diff --git a/gray-theme/unauthenticated/toggleview.js b/gray-theme/unauthenticated/toggleview.js
deleted file mode 100644
index 343328c4f..000000000
--- a/gray-theme/unauthenticated/toggleview.js
+++ /dev/null
@@ -1,6 +0,0 @@
-function toggleview (id1,id2) {
-		var obj1 = document.getElementById(id1);
-		var obj2 = document.getElementById(id2);
-		(obj1.className=="itemshown") ? obj1.className="itemhidden" : obj1.className="itemshown"; 
-		(obj1.className=="itemshown") ? obj2.innerHTML="<img border='0' src='images/open.gif' alt='[&ndash;]'>" : obj2.innerHTML="<img border='0' src='images/closed.gif' alt='[+]'>"; 
-	}