Style setup page with collapse feature

sort order too.

tools/esp8266/html/setup.html

@@ -52,44 +52,53 @@
         <h1>Setup</h1>
         <div id="setup" class="content">
             <div id="content">
-                <p>
-                    Enter the credentials to your prefered WiFi station. After rebooting the device tries to connect with this information.
-                </p>
+                <a class="erase" href="/erase">ERASE SETTINGS (not WiFi)</a>
+
+                <p class="des">Device Host Name</p>
+                    <label for="device">Device Name</label>
+                    <input type="text" class="text" name="device" value="{DEVICE}"/>
+                
                 <form method="post" action="{IP}/save">
-                    <p class="des">WiFi</p>
+                    <button type="button" class="s_collapsible">WiFi</button>
+                    <div class="s_content">
+                        <fieldset>
+                            <legend class="des">WiFi</legend>
+                            <p>Enter the credentials to your prefered WiFi station. After rebooting the device tries to connect with this information.</p>
                             <label for="ssid">SSID</label>
                             <input type="text" class="text" name="ssid" value="{SSID}"/>
                             <label for="pwd">Password</label>
                             <input type="password" class="text" name="pwd" value="{PWD}"/>
-                    <p class="des">Device Host Name</p>
-                    <label for="device">Device Name</label>
-                    <input type="text" class="text" name="device" value="{DEVICE}"/>
-
-
-                    <a class="erase" href="/erase">ERASE SETTINGS (not WiFi)</a>
+                        </fieldset>
+                    </div>
 
-                    <p class="des">Inverter</p>
+                    <button type="button" class="s_collapsible">Inverter</button>
+                    <div class="s_content">
+                    <fieldset>
+                    <legend class="des">Inverter</legend>
                         {INVERTERS}<br/>
                         <p class="subdes">General</p>
                         <label for="invInterval">Interval [s]</label>
                         <input type="text" class="text" name="invInterval" value="{INV_INTVL}"/>
                         <label for="invRetry">Max retries per Payload</label>
                         <input type="text" class="text" name="invRetry" value="{INV_RETRIES}"/>
+                    </fieldset>
+                    </div>
 
-                    <p class="des">Pinout (Wemos)</p>
-                    {PINOUT}
-
-                    <p class="des">Radio (NRF24L01+)</p>
-                    <label for="rf24Power">Amplifier Power Level</label>
-                    <select name="rf24Power">{RF24}</select>
-
-                    <p class="des">NTP Server</p>
+                    <button type="button" class="s_collapsible">NTP Server</button>
+                    <div class="s_content">
+                    <fieldset>
+                    <legend class="des">NTP Server</legend>
                         <label for="ntpAddr">NTP Server / IP</label>
                         <input type="text" class="text" name="ntpAddr" value="{NTP_ADDR}"/>
                         <label for="ntpPort">NTP Port</label>
                         <input type="text" class="text" name="ntpPort" value="{NTP_PORT}"/>
+                    </fieldset>
+                    </div>
 
-                    <p class="des">MQTT</p>
+                    <button type="button" class="s_collapsible">MQTT</button>
+                    <div class="s_content">
+                    <fieldset>
+                    <legend class="des">MQTT</legend>
                         <label for="mqttAddr">Broker / Server IP</label>
                         <input type="text" class="text" name="mqttAddr" value="{MQTT_ADDR}"/>
                         <label for="mqttPort">Port</label>
@@ -102,6 +111,19 @@
                         <input type="text" class="text" name="mqttTopic" value="{MQTT_TOPIC}"/>
                         <label for="mqttIntvl">Interval [s] (read-only)</label>
                         <input type="text" class="text" name="mqttIntvl" value="{MQTT_INTVL}" readonly/>
+                    </fieldset>
+                    </div>
+
+                    <button type="button" class="s_collapsible">System Config</button>
+                    <div class="s_content">
+                    <fieldset>
+                        <legend class="des">System Config</legend>
+                        <p class="des">Pinout (Wemos)</p>
+                        {PINOUT}
+
+                        <p class="des">Radio (NRF24L01+)</p>
+                        <label for="rf24Power">Amplifier Power Level</label>
+                        <select name="rf24Power">{RF24}</select>
 
                         <p class="des">Serial Console</p>
                         <label for="serEn">print inverter data</label>
@@ -110,6 +132,8 @@
                         <input type="checkbox" class="cb" name="serDbg" {SER_DBG_CB}/><br/>
                         <label for="serIntvl">Interval [s]</label>
                         <input type="text" class="text" name="serIntvl" value="{SER_INTVL}"/>
+                    </fieldset>
+                    </div>
 
                     <p class="des">&nbsp;</p>
                     <label for="reboot">Reboot device after successful save</label>
@@ -126,5 +150,22 @@
             <p class="right"><a href="{IP}/factory">Factory Reset</a></p>
             <p class="right"><a href="{IP}/reboot">Reboot</a></p>
         </div>
+
+        <script>
+        var coll = document.getElementsByClassName("s_collapsible");
+        var i;
+        
+        for (i = 0; i < coll.length; i++) {
+            coll[i].addEventListener("click", function() {
+            this.classList.toggle("active");
+            var content = this.nextElementSibling;
+            if (content.style.display === "block") {
+                content.style.display = "none";
+            } else {
+                content.style.display = "block";
+            }
+            });
+        }
+        </script>
     </body>
 </html>