Overusing dropdowns, add responsiveness

nearest.css

@@ -18,11 +18,17 @@ body {
 
 .container {
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: column nowrap;
     justify-content: space-between;
     align-items: flex-start;
 }
 
+@media (min-width: 1000px) {
+    .container {
+        flex-direction: row;
+    }
+}
+
 .start-justified {
     justify-content: flex-start;
 }
@@ -34,6 +40,16 @@ body {
     align-items: stretch;
 }
 
+@media (min-width: 1500px) {
+    .rpanel {
+        flex-direction: row;
+    }
+
+    .rpanel > :last-child {
+        margin-left: 16px;
+    }
+}
+
 .center-text {
     text-align: center;
 }
@@ -167,19 +183,46 @@ label {
 }
 
 .pkmn-list {
+    display: none;
     list-style-type: none;
     padding: 0;
     margin: 0;
     margin-top: 8px;
+    margin-left: 8px;
+    margin-bottom: 16px;
     width: 100%;
 }
 
+.show-list {
+    display: none;
+}
+
+.show-list:checked ~ .pkmn-list {
+    display: block;
+}
+
+.show-list-lbl-hide {
+    display: none;
+}
+
+.show-list:checked ~ * > .show-list-lbl-hide {
+    display: block;
+}
+
+.show-list-lbl-show {
+    display: block;
+}
+
+.show-list:checked ~ * > .show-list-lbl-show {
+    display: none;
+}
+
 #search-space-button {
     width: 3em;
 }
 
 #controls {
-    width: calc(var(--tile-width) + 16px);
+    width: calc(var(--tile-width) + 32px);
     display: grid;
     gap: 4px 16px;
     grid:

nearest.html

@@ -110,8 +110,6 @@
                 >
             </div>
 
-            <label style="grid-area: srch;" for="pokemon-name">Search By Pokemon</label>
-            <input style="grid-area: name;" id="pokemon-name" size="15" oninput="onSearchChanged()">
             <div style="grid-area: btns; display: inline-flex; flex-flow: row nowrap; justify-content: space-between;">
                 <button class="padded" type="button" onclick="onRandomPokemon()">
                     Random
@@ -120,16 +118,33 @@
                     <span id="search-space-display">RGB</span>
                 </button>
             </div>
-            <ul id="search-list" style="grid-area: rslt; margin-left: 8px;" class="pkmn-list"></ul>
+
+            <input type="checkbox" checked class="show-list" role="button" id="search-list-toggle">
+            <label style="grid-area: srch;" for="search-list-toggle" class="title">
+                <div class="show-list-lbl-show">Search By Pokemon ►</div>
+                <div class="show-list-lbl-hide">Search By Pokemon ▼</div>
+            </label>
+            <input style="grid-area: name;" id="pokemon-name" size="15" oninput="onSearchChanged()">
+            <ul id="search-list" style="grid-area: rslt;" class="pkmn-list"></ul>
         </form>
 
-        <div class="padded panel">
-            <div class="title">CIECAM02 Uniform Color Space (Jab)</div>
-            <ul id="best-list-jab" class="pkmn-list"></ul>
-        </div>
-        <div class="padded panel">
-            <div class="title">sRGB Color Space</div>
-            <ul id="best-list-rgb" class="pkmn-list"></ul>
+        <div class="panel rpanel">
+            <div>
+                <input type="checkbox" checked class="show-list" role="button" id="jab-list-toggle">
+                <label for="jab-list-toggle" class="title">
+                    <div class="show-list-lbl-show">CIECAM02 Uniform Color Space (Jab) ►</div>
+                    <div class="show-list-lbl-hide">CIECAM02 Uniform Color Space (Jab) ▼</div>
+                </label>
+                <ul id="best-list-jab" class="pkmn-list"></ul>
+            </div>
+            <div>
+                <input type="checkbox" class="show-list" role="button" id="rgb-list-toggle">
+                <label for="rgb-list-toggle" class="title">
+                    <div class="show-list-lbl-show">sRGB Color Space ►</div>
+                    <div class="show-list-lbl-hide">sRGB Color Space ▼</div>
+                </label>
+                <ul id="best-list-rgb" class="pkmn-list"></ul>
+            </div>
         </div>
     </div>
 </body>