Show/Hide toggle Plus/Minus

web/css/src/themes/default.css

@@ -3301,6 +3301,7 @@ a.button.cancel {
 }
 
 .section-title {
+  position:relative;
   cursor: default;
   font-size: 1.05rem!important;
   font-weight: 600!important;
@@ -3313,9 +3314,9 @@ a.button.cancel {
 }
 
 .section-hide-button {
-  margin-top: 32px;
-  display: inline-block;
-  margin-left: -14px;
+  position:absolute;
+  right:0;
+  font-size:13.6px;
 }
 
 .qr-code {

web/js/app.js

@@ -1063,8 +1063,12 @@ function doSearch(url) {
 }
 
 
-function elementHideShow(elementToHideOrShow){
+function elementHideShow(elementToHideOrShow,trigger){
     var el = document.getElementById(elementToHideOrShow);
     el.style.display = el.style.display === 'none' ? 'block' : 'none';
+    
+    if (typeof trigger !== 'undefined') {
+        trigger.querySelector('.section-hide-button').classList.toggle('fa-minus-square');
+        trigger.querySelector('.section-hide-button').classList.toggle('fa-plus-square');
+    }
 }
-

web/templates/pages/add_package.html

@@ -96,11 +96,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('web-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('web-options',this)">
 								<?=_('Web');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('web-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>
@@ -205,11 +203,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('dns-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('dns-options',this)">
 								<?=_('DNS');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('dns-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>
@@ -339,11 +335,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('mail-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('mail-options',this)">
 								<?=_('Mail');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('mail-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>
@@ -375,11 +369,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('database-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('database-options',this)">
 								<?=_('Databases');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('database-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>
@@ -400,11 +392,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('system-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('system-options',this)">
 								<?=_('System');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('system-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_package.html

@@ -98,11 +98,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('web-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('web-options',this)">
 								<?=_('Web');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('web-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>
@@ -208,11 +206,9 @@
 						</tr>
 
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('dns-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('dns-options',this)">
 								<?=_('DNS');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('dns-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>
@@ -342,11 +338,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('mail-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('mail-options',this)">
 								<?=_('Mail');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('mail-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>
@@ -378,11 +372,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('database-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('database-options',this)">
 								<?=_('Databases');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('database-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>
@@ -403,11 +395,9 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="section-title" onclick="javascript:elementHideShow('system-options')">
+							<td class="section-title" onclick="javascript:elementHideShow('system-options',this)">
 								<?=_('System');?>
-							</td>
-							<td class="section-hide-button">
-								<a href="javascript:elementHideShow('system-options');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+								<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_server.html

@@ -940,11 +940,9 @@
 							<td class="vst-text input-label step-left">
 								<table style="<?php if (empty($v_security_adv)) echo 'display:none;';?>" id="security">
 									<tr>
-										<td class="section-title" onclick="javascript:elementHideShow('security-system-table');">
+										<td class="section-title" onclick="javascript:elementHideShow('security-system-table',this);">
 											<?=('System');?>
-										</td>
-										<td class="section-hide-button">
-											<a href="javascript:elementHideShow('security-system-table');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+											<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 										</td>
 									</tr>
 									<tr>
@@ -1037,11 +1035,9 @@
 									</tr>
 									<?php if (($_SESSION['userContext'] === "admin") && ($_SESSION['user'] === 'admin')) {?>
 										<tr>
-											<td class="section-title" onclick="javascript:elementHideShow('security-sysadminprotect-table');">
+											<td class="section-title" onclick="javascript:elementHideShow('security-sysadminprotect-table',this);">
 												<?=('System Protection');?>
-											</td>
-											<td class="section-hide-button">
-												<a href="javascript:elementHideShow('security-sysadminprotect-table');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+												<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 											</td>
 										</tr>
 										<tr>
@@ -1100,11 +1096,9 @@
 										</tr>
 									<?php } ?>
 									<tr>
-										<td class="section-title" onclick="javascript:elementHideShow('security-policies-table');">
+										<td class="section-title" onclick="javascript:elementHideShow('security-policies-table',this);">
 											<?=('Policies');?>
-										</td>
-										<td class="section-hide-button">
-											<a href="javascript:elementHideShow('security-policies-table');"><i class="fas fa-minus-square status-icon dim maroon"></i></a>
+											<i class="fas fa-plus-square status-icon dim maroon section-hide-button"></i>
 										</td>
 									</tr>
 									<tr>