Put maps category lists in accordions with corresponding titles.

soybase · Aug 18, 2023 · 7b1ccc4 · 7b1ccc4
1 parent 5a935e3
commit 7b1ccc4
Showing 1 changed file with 38 additions and 23 deletions.
diff --git a/maps/index.html b/maps/index.html
@@ -17,36 +17,51 @@ <h2>Genetic Map Resources for Soybean</h2>
 
 <p>
   Maps below show QTLs and GWAS features. Click a chromosome number to go to the corresponding linkage group views. 
-  See correspondences on rollover: chromosome Gm<strong>01</strong> ==> linkage group <strong>D1a</strong>; 
-  chromosome Gm<strong>20</strong> ==> linkage group <strong>I</strong>, etc. <br>
+  See correspondences on rollover: chromosome Gm<strong>01</strong>
+  ==> linkage group
+  <strong>D1a</strong>; 
+  chromosome Gm<strong>20</strong>
+  ==> linkage group
+  <strong>I</strong>, etc. <br>
   For more convenient browsing, the QTLs have been divided into the categories listed below.
 </p>
 
 {% for cmap-set in map_cmap.cmap-sets %}
-  <dl>
-    <dd>{{ cmap-set.description }}:</dd>
-    <table class="uk-table">
-      <tbody>
-        <tr>
-          {% assign chr = 0 %}
-          {% for LG in cmap-set.linkage_groups %}
-            {% assign chr = chr | plus:1 %}
-            <td>
-              <div  data-uk-tooltip="{pos:'bottom-left'}"; uk-tooltip="title: {{ LG }}">
-                {% capture map_path %}{{ cmap-set.URL }}?config=map-{{ chr | prepend: '00' | slice: -2,2 }}.json {% endcapture %}
-                <a href="{{ map_path | relative_url }}">{{ chr | prepend: '00' | slice: -2,2 }}</a>
-              </div>
-            </td>
-          {% endfor %}
-        </tr>
-    </table>
-  </dl>
+  <ul uk-accordion>
+    <li>
+      <a class="uk-accordion-title" href="#">{{ cmap-set.description }}</a>
+      <div class="uk-accordion-content">
+        <table class="uk-table">
+          <tbody>
+            <tr>
+              {% assign chr = 0 %}
+              {% for LG in cmap-set.linkage_groups %}
+                {% assign chr = chr | plus: 1 %}
+                <td>
+                  <div
+                    data-uk-tooltip="{pos:'bottom-left'}"
+                    ;
+                    uk-tooltip="title: {{ LG }}">
+                    {% capture map_path %}
+                      {{ cmap-set.URL }}?config=map-{{ chr | prepend: '00' | slice: -2, 2 }}.json
+                    {% endcapture %}
+                    <a href="{{ map_path | relative_url }}">{{ chr | prepend: '00' | slice: -2, 2 }}</a>
+                  </div>
+                </td>
+              {% endfor %}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </li>
+  </ul>
 {% endfor %}
 
 {% for resource in map_resource.resources %}
   <dl>
-    <dt><a href="{{ resource.URL }}">{{ resource.name }}</a></dt>
+    <dt>
+      <a href="{{ resource.URL }}">{{ resource.name }}</a>
+    </dt>
     {{ resource.description }}
   </dl>
-{% endfor %}
-
+{% endfor %}