frontend: Make advanced options details/summary

app.js

@@ -42,14 +42,6 @@ function getHasher(hashType) {
 (async () => {
   await init()
 
-  document.getElementById("advanced-options").addEventListener("change", e => {
-    if (e.target.checked) {
-      document.body.classList.add("advanced")
-    } else {
-      document.body.classList.remove("advanced")
-    }
-  })
-
   document.getElementById("generate").addEventListener("click", e => {
     e.target.disabled = true
     const buttonText = e.target.innerText

index.html

@@ -18,14 +18,13 @@
         <input name="hash-type" type="radio" value="bcrypt" checked>bcrypt</input>
         <input name="hash-type" type="radio" value="sha512crypt">SHA512-crypt</input><br>
 
-        <input id="advanced-options" name="advanced" type="checkbox">Advanced options</input><br>
-
-        <div class="advanced">
+        <details>
+          <summary>Advanced options</summary>
           <label for="bcrypt-cost">bcrpyt cost factor</label>
           <input name="bcrypt-cost" type="number" value="12" min="4" max="31"></input><br>
           <label for="sha512crypt-rounds">SHA512-crypt rounds</label>
           <input name="sha512crypt-rounds" type="number" value="100000" min="1000" max="999999999"></input><br>
-        </div>
+        </details>
 
         <button type="button" id="generate">Generate</button>
       </form>

style.css

@@ -18,11 +18,3 @@
   font-family: monospace;
   line-break: anywhere;
 }
-
-body .advanced {
-  display: none;
-}
-
-body.advanced .advanced {
-  display: initial;
-}