From 319561b177d95f88c5297435371fc3f4111deddc Mon Sep 17 00:00:00 2001
From: stonedDiscord <Tukz@gmx.de>
Date: Mon, 1 Aug 2022 23:01:46 +0200
Subject: declutter the controls a little

---
 public/client.html         |  7 +++++--
 webAO/dom/toggleElement.js | 13 +++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 webAO/dom/toggleElement.js

diff --git a/public/client.html b/public/client.html
index 1fc83cb..2436c22 100644
--- a/public/client.html
+++ b/public/client.html
@@ -203,6 +203,8 @@
 				<br>
 				<br>
 				<span id="pairing" style="display: none">
+					<button id="button_toggle_pairing"  alt="Pairing"  class="client_button" onclick="toggleElement('pairing_settings')">Pairing</button>
+					<span id="pairing_settings" style="display: none">
 					<label for="pair_select">Pairing partner:</label>
 					<select name="pair_select" id="pair_select">
 						<option value="-1">None</option>
@@ -212,7 +214,8 @@
 						<tr id="y_offset" style="display: none"><td><p  >Vertical offset:</p></td><td><input type="range" name="pair_y_offset" id="pair_y_offset" min="-100" max="100" value="0"></td></tr>
 					</table>
 					<input id="pair_reset" type="button" value="Reset" onclick="resetOffset()">
-				<br>
+					</span>
+				</span>
 				<br>
 				<br>
 				<span id="cccc" style="display: none">
@@ -294,7 +297,7 @@
 				<br>
 				<span id="muting">
 					<label for="mute_select" style="float: left">Mute a character: </label>
-					<select name="mute_select" id="mute_select" size="15" style="float: left"
+					<select name="mute_select" id="mute_select"
 						onchange="mutelist_click(event)"></select>
 				</span>
 			</fieldset>
diff --git a/webAO/dom/toggleElement.js b/webAO/dom/toggleElement.js
new file mode 100644
index 0000000..efddabf
--- /dev/null
+++ b/webAO/dom/toggleElement.js
@@ -0,0 +1,13 @@
+/**
+ * Hides and shows any html element
+ * @param {string} element_id the id of the element to toggle
+ */
+export function toggleElement(element_id) {
+    const element = document.getElementById(element_id);
+    if (element.style.display !== 'none') {
+        element.style.display = 'none';
+    } else {
+        element.style.display = 'block';
+    }
+}
+window.toggleElement = toggleElement;
-- 
cgit