Use a details element

randomairborne · Nov 25, 2024 · d57722d · d57722d
1 parent 38b866a
commit d57722d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/assets/index.css b/assets/index.css
@@ -127,6 +127,16 @@ pre > code {
 
 .ip {
   cursor: pointer;
+  margin: 2px;
+}
+
+details.ip[open] summary {
+  display: none;
+}
+
+.user-ip-stack {
+  display: flex;
+  align-items: center;
 }
 
 .root-api-status {

diff --git a/templates/index.hbs b/templates/index.hbs
@@ -13,24 +13,15 @@
     <div class="small-vspacer"></div>
     <div class="user-ip-stack">
       <span id="ip-descriptor" class="ip">Your IP:</span>
-      <span id="ip-msg" class="ip">Click to Reveal</span>
-      <span id="user-ip" class="ip" hidden></span>
+      <details id="ip-msg" class="ip">
+        <summary class="ip">Click to Reveal</summary>
+        <span id="user-ip">(javascript required to load your IP)</span>
+      </details>
     </div>
   </div>
   <a href="/api/">API</a>
   <script nonce="{{ nonce }}">
     const ipElement = document.getElementById("user-ip");
-    const ipMsgElement = document.getElementById("ip-msg");
-    const ipDescriptorElement = document.getElementById("ip-descriptor");
-
-    function ipClick() {
-      ipElement.hidden = !ipElement.hidden;
-      ipMsgElement.hidden = !ipMsgElement.hidden;
-    }
-
-    ipElement.addEventListener("click", ipClick);
-    ipMsgElement.addEventListener("click", ipClick);
-    ipDescriptorElement.addEventListener("click", ipClick);
 
     fetch("https://v4.giveip.io/raw")
       .then((rsp) => rsp.text())