diff --git a/_includes/accordion.html b/_includes/accordion.html
deleted file mode 100644
index 3a656d6788..0000000000
--- a/_includes/accordion.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<!-- Support for accordion user interface on the home page. -->
-<noscript><style>
-  /* Without JavaScript, show all panels (css/style.css hides them by default). */
-  .jquery-ui-accordion .ui-accordion-content { display: block; }
-</style></noscript>
-<script type="text/javascript">
-    // vanilla JS accordion over the statically rendered markup in at_glance*.html.
-    // Panels are just display toggled and size themselves to their content vertically.
-    (function() {
-        var setClass = function(el, cls, on) {
-            if (on) el.classList.add(cls);
-            else el.classList.remove(cls);
-        };
-
-        var setup = function() {
-            var panelOf = function(header) {
-                var el = header.nextElementSibling;
-                while (el && !el.classList.contains('ui-accordion-content')) {
-                    if (el.classList.contains('ui-accordion-header')) return null;
-                    el = el.nextElementSibling;
-                }
-                return el;
-            };
-
-            var setOpen = function(header, open) {
-                var panel = panelOf(header);
-                if (!panel) return;
-                setClass(header, 'ui-state-active', open);
-                setClass(header, 'ui-state-default', !open);
-                setClass(header, 'ui-corner-top', open);
-                setClass(header, 'ui-corner-all', !open);
-                header.setAttribute('aria-expanded', open ? 'true' : 'false');
-                var icon = header.querySelector('.ui-accordion-header-icon');
-                if (icon) {
-                    setClass(icon, 'ui-icon-triangle-1-s', open);
-                    setClass(icon, 'ui-icon-triangle-1-e', !open);
-                }
-                setClass(panel, 'ui-accordion-content-active', open);
-                panel.style.display = open ? 'block' : '';
-            };
-
-            var toggle = function(header) {
-                var wasOpen = header.classList.contains('ui-state-active');
-                // One open panel at a time within each accordion.
-                var siblings = header.parentElement.children;
-                for (var i = 0; i < siblings.length; i++) {
-                    if (siblings[i].classList.contains('ui-accordion-header')
-                            && siblings[i].classList.contains('ui-state-active')) {
-                        setOpen(siblings[i], false);
-                    }
-                }
-                if (!wasOpen) setOpen(header, true);
-            };
-
-            var headerFor = function(target, container) {
-                // Nearest enclosing header that is a direct child of container;
-                // events inside nested subaccordions are left to their own listener.
-                for (var el = target; el && el !== container; el = el.parentElement) {
-                    if (el.classList.contains('ui-accordion-header')) {
-                        return el.parentElement === container ? el : null;
-                    }
-                }
-                return null;
-            };
-
-            var onActivate = function(e) {
-                var header = headerFor(e.target, e.currentTarget);
-                if (header) {
-                    if (e.type === 'keydown') e.preventDefault();
-                    toggle(header);
-                }
-            };
-
-            var containers = document.querySelectorAll('.jquery-ui-accordion, .jquery-ui-subaccordion-closed');
-            for (var c = 0; c < containers.length; c++) {
-                var cls = ['ui-accordion', 'ui-widget', 'ui-helper-reset', 'ui-accordion-icons'];
-                for (var k = 0; k < cls.length; k++) containers[c].classList.add(cls[k]);
-                containers[c].removeAttribute('role'); // pre-rendered "tablist" no longer applies
-                containers[c].addEventListener('click', onActivate);
-                containers[c].addEventListener('keydown', function(e) {
-                    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') onActivate(e);
-                });
-            }
-
-            // Per header: add the open/closed triangle icon, make it
-            // keyboard-focusable, rewrite the pre-rendered tab/tabpanel roles
-            // as a disclosure pattern (button + labelled region), and drop the
-            // pre-rendered inline panel height so panels size to their content.
-            var headers = document.querySelectorAll('.jquery-ui-accordion .ui-accordion-header');
-            for (var h = 0; h < headers.length; h++) {
-                var header = headers[h];
-                var icon = document.createElement('span');
-                icon.className = 'ui-accordion-header-icon ui-icon ui-icon-triangle-1-e';
-                icon.setAttribute('aria-hidden', 'true');
-                header.insertBefore(icon, header.firstChild);
-                header.setAttribute('tabindex', '0');
-                header.setAttribute('role', 'button');
-                header.setAttribute('aria-expanded', 'false');
-                header.removeAttribute('aria-selected');
-                if (!header.id) header.id = 'accordion-header-' + h;
-                var panel = panelOf(header);
-                if (panel) {
-                    panel.style.height = '';
-                    panel.setAttribute('role', 'region');
-                    if (!panel.id) panel.id = 'accordion-panel-' + h;
-                    header.setAttribute('aria-controls', panel.id);
-                    panel.setAttribute('aria-labelledby', header.id);
-                }
-            }
-        };
-
-        // This include sits below the accordion markup, so setup runs immediately
-        // during parse rather than waiting for DOMContentLoaded (which deferred
-        // external scripts would delay).
-        if (document.querySelector('.jquery-ui-accordion')) {
-            setup();
-        } else if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', setup);
-        }
-    })();
-</script>
diff --git a/_includes/at_glance.html b/_includes/at_glance.html
index c0912ea2ae..7802939d1c 100644
--- a/_includes/at_glance.html
+++ b/_includes/at_glance.html
@@ -1,29 +1,22 @@
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
-
   <!-- start of Abaza accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-ABAZA.svg" /></span>
-    <span class="doublewidespan">Abaza</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="652 tokens 652 words 652 nodes 98 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Northwest Caucasian</span>
-  </div>
-  <!-- end of Abaza accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-abq">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-ABAZA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Abaza</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="652 tokens 652 words 652 nodes 98 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Northwest Caucasian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Abaza accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Abaza treebanks</h3>
 
     <!-- start of Abaza treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Abaza / ATB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-abq">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ATB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="652 tokens 652 words 652 nodes 98 sentences">&lt;1K</span></span>
@@ -32,8 +25,8 @@ <h3>Abaza treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.398187"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Abaza-ATB is a treebank based on [Spoken corpus of Abaza](http://lingconlab.ru/spoken_abaza/).
 
@@ -45,11 +38,10 @@ <h3>Abaza treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Abaza / ATB entry -->
-      
-    </div> <!-- end of Abaza treebank list -->
+    </details>
+    
+    <!-- end of Abaza treebank list -->
 
     
 
@@ -59,35 +51,29 @@ <h3> Language documentation </h3>
     See the <a href="abq/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Abaza accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Abaza accordion row -->
 
   <!-- start of Abkhaz accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GE-AB.svg" /></span>
-    <span class="doublewidespan">Abkhaz</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="13,054 tokens 13,054 words 13,054 nodes 1,545 sentences">13K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Northwest Caucasian</span>
-  </div>
-  <!-- end of Abkhaz accordion row -->
-
-  <!-- start of Abkhaz accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ab">
+      <span class="flagspan"><img class="flag" src="flags/svg/GE-AB.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Abkhaz</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="13,054 tokens 13,054 words 13,054 nodes 1,545 sentences">13K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Northwest Caucasian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Abkhaz treebanks</h3>
 
     <!-- start of Abkhaz treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Abkhaz / AbNC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ab">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AbNC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="13,054 tokens 13,054 words 13,054 nodes 1,545 sentences">13K</span></span>
@@ -96,8 +82,8 @@ <h3>Abkhaz treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.504946"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Abkhaz-AbNC is a treebank based on texts from the Abkhaz National Corpus, [AbNC](https://clarino.uib.no/abnc).
 
@@ -109,11 +95,10 @@ <h3>Abkhaz treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Abkhaz / AbNC entry -->
-      
-    </div> <!-- end of Abkhaz treebank list -->
+    </details>
+    
+    <!-- end of Abkhaz treebank list -->
 
     
 
@@ -123,35 +108,29 @@ <h3> Language documentation </h3>
     See the <a href="ab/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Abkhaz accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Abkhaz accordion row -->
 
   <!-- start of Afrikaans accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ZA.svg" /></span>
-    <span class="doublewidespan">Afrikaans</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="49,258 tokens 49,258 words 49,258 nodes 1,934 sentences">49K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Afrikaans accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-af">
+      <span class="flagspan"><img class="flag" src="flags/svg/ZA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Afrikaans</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="49,258 tokens 49,258 words 49,258 nodes 1,934 sentences">49K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Afrikaans accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Afrikaans treebanks</h3>
 
     <!-- start of Afrikaans treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Afrikaans / AfriBooms entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-af">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AfriBooms</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="49,258 tokens 49,258 words 49,258 nodes 1,934 sentences">49K</span></span>
@@ -160,8 +139,8 @@ <h3>Afrikaans treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.592421"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Afrikaans-AfriBooms is a conversion of the AfriBooms Dependency Treebank, originally annotated with a simplified PoS set and dependency relations according to a subset of the Stanford tag set. The corpus consists of public government documents.
 
@@ -173,11 +152,10 @@ <h3>Afrikaans treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Afrikaans / AfriBooms entry -->
-      
-    </div> <!-- end of Afrikaans treebank list -->
+    </details>
+    
+    <!-- end of Afrikaans treebank list -->
 
     
 
@@ -187,35 +165,29 @@ <h3> Language documentation </h3>
     See the <a href="af/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Afrikaans accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Afrikaans accordion row -->
 
   <!-- start of Akkadian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IQ.svg" /></span>
-    <span class="doublewidespan">Akkadian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="22,369 tokens 25,017 words 25,017 nodes 1,975 sentences">25K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="government news nonfiction"><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Akkadian accordion row -->
-
-  <!-- start of Akkadian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-akk">
+      <span class="flagspan"><img class="flag" src="flags/svg/IQ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Akkadian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="22,369 tokens 25,017 words 25,017 nodes 1,975 sentences">25K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="government news nonfiction"><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Akkadian treebanks</h3>
 
     <!-- start of Akkadian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Akkadian / RIAO entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-akk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">RIAO</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="20,517 tokens 23,165 words 23,165 nodes 1,874 sentences">23K</span></span>
@@ -224,8 +196,8 @@ <h3>Akkadian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="government nonfiction"><i class="fa fa-fort-awesome"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004728"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         162 royal inscriptions of four early Neo-Assyrian kings.
 
@@ -237,12 +209,11 @@ <h3>Akkadian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Akkadian / RIAO entry -->
-      
-      <!-- start of Akkadian / PISANDUB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-akk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PISANDUB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,852 tokens 1,852 words 1,852 nodes 101 sentences">1K</span></span>
@@ -251,8 +222,8 @@ <h3>Akkadian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003182"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A small set of sentences from Babylonian royal inscriptions.
 
@@ -264,11 +235,10 @@ <h3>Akkadian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Akkadian / PISANDUB entry -->
-      
-    </div> <!-- end of Akkadian treebank list -->
+    </details>
+    
+    <!-- end of Akkadian treebank list -->
 
     
     See <a href="treebanks/akk-comparison.html">here</a> for comparative statistics of Akkadian treebanks.
@@ -280,35 +250,29 @@ <h3> Language documentation </h3>
     See the <a href="akk/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Akkadian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Akkadian accordion row -->
 
   <!-- start of Akuntsu accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Akuntsu</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,449 tokens 1,468 words 1,468 nodes 343 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Tupian, Tupari</span>
-  </div>
-  <!-- end of Akuntsu accordion row -->
-
-  <!-- start of Akuntsu accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-aqz">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Akuntsu</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,449 tokens 1,468 words 1,468 nodes 343 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Tupian, Tupari</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Akuntsu treebanks</h3>
 
     <!-- start of Akuntsu treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Akuntsu / TuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-aqz">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,449 tokens 1,468 words 1,468 nodes 343 sentences">1K</span></span>
@@ -317,8 +281,8 @@ <h3>Akuntsu treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002878"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Akuntsu-TuDeT is a collection of annotated sentences in &lt;a href=&#34;https://glottolog.org/resource/languoid/id/akun1241&#34;&gt; Akuntsú&lt;/a&gt;. The sentences stem from the grammatical description by Aragon (2014) and Aragon&#39;s field work. Sentence annotation and documentation by Carolina Aragon, Fabrício Ferraz Gerardi, Luana dos Santos.
 
@@ -330,11 +294,10 @@ <h3>Akuntsu treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Akuntsu / TuDeT entry -->
-      
-    </div> <!-- end of Akuntsu treebank list -->
+    </details>
+    
+    <!-- end of Akuntsu treebank list -->
 
     
 
@@ -344,35 +307,29 @@ <h3> Language documentation </h3>
     See the <a href="aqz/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Akuntsu accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Akuntsu accordion row -->
 
   <!-- start of Albanian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AL.svg" /></span>
-    <span class="doublewidespan">Albanian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4,421 tokens 4,485 words 4,485 nodes 260 sentences">4K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction wiki"><i class="fa fa-book"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Albanian</span>
-  </div>
-  <!-- end of Albanian accordion row -->
-
-  <!-- start of Albanian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sq">
+      <span class="flagspan"><img class="flag" src="flags/svg/AL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Albanian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4,421 tokens 4,485 words 4,485 nodes 260 sentences">4K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction wiki"><i class="fa fa-book"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Albanian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Albanian treebanks</h3>
 
     <!-- start of Albanian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Albanian / STAF entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sq">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">STAF</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,499 tokens 3,563 words 3,563 nodes 200 sentences">3K</span></span>
@@ -381,8 +338,8 @@ <h3>Albanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.371276"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD-Albanian-STAF (Saarbruecken Treebank of Albanian Fiction) is a treebank of the Albanian language, comprising 202 randomly selected sentences from six fictional books published between 1963 and 2004.
 
@@ -394,12 +351,11 @@ <h3>Albanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Albanian / STAF entry -->
-      
-      <!-- start of Albanian / TSA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sq">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TSA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="922 tokens 922 words 922 nodes 60 sentences">&lt;1K</span></span>
@@ -408,8 +364,8 @@ <h3>Albanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004047"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Albanian Treebank is a small treebank for Standard Albanian, developed within a project framework at Uppsala University. The data was extracted from Wikipedia.
 
@@ -421,11 +377,10 @@ <h3>Albanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Albanian / TSA entry -->
-      
-    </div> <!-- end of Albanian treebank list -->
+    </details>
+    
+    <!-- end of Albanian treebank list -->
 
     
     See <a href="treebanks/sq-comparison.html">here</a> for comparative statistics of Albanian treebanks.
@@ -437,35 +392,29 @@ <h3> Language documentation </h3>
     See the <a href="sq/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Albanian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Albanian accordion row -->
 
   <!-- start of Alemannic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CH.svg" /></span>
-    <span class="doublewidespan">Alemannic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="20,778 tokens 21,187 words 21,187 nodes 1,077 sentences">21K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible blog fiction legal news nonfiction spoken wiki"><i class="fa fa-cloud"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Alemannic accordion row -->
-
-  <!-- start of Alemannic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gsw">
+      <span class="flagspan"><img class="flag" src="flags/svg/CH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Alemannic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="20,778 tokens 21,187 words 21,187 nodes 1,077 sentences">21K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible blog fiction legal news nonfiction spoken wiki"><i class="fa fa-cloud"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Alemannic treebanks</h3>
 
     <!-- start of Alemannic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Alemannic / UZH entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gsw">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UZH</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,444 tokens 1,444 words 1,444 nodes 100 sentences">1K</span></span>
@@ -474,8 +423,8 @@ <h3>Alemannic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.228849"><img src="/img/stars10.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         _UD\_Alemannic-UZH_ is a tiny manually annotated treebank of 100 sentences in different Swiss German dialects and a variety of text genres.
 
@@ -487,12 +436,11 @@ <h3>Alemannic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Alemannic / UZH entry -->
-      
-      <!-- start of Alemannic / DIVITAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gsw">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DIVITAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,334 tokens 19,743 words 19,743 nodes 977 sentences">19K</span></span>
@@ -501,8 +449,8 @@ <h3>Alemannic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction legal nonfiction spoken wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004468"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Alemannic-DIVITAL is a manually corrected treebank of Alemannic Alsatian consisting of sentences from several genres.
 
@@ -514,11 +462,10 @@ <h3>Alemannic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Alemannic / DIVITAL entry -->
-      
-    </div> <!-- end of Alemannic treebank list -->
+    </details>
+    
+    <!-- end of Alemannic treebank list -->
 
     
     See <a href="treebanks/gsw-comparison.html">here</a> for comparative statistics of Alemannic treebanks.
@@ -530,35 +477,29 @@ <h3> Language documentation </h3>
     See the <a href="gsw/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Alemannic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Alemannic accordion row -->
 
   <!-- start of Amharic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ET.svg" /></span>
-    <span class="doublewidespan">Amharic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="5,245 tokens 10,010 words 10,010 nodes 1,074 sentences">10K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples news nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Amharic accordion row -->
-
-  <!-- start of Amharic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-am">
+      <span class="flagspan"><img class="flag" src="flags/svg/ET.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Amharic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="5,245 tokens 10,010 words 10,010 nodes 1,074 sentences">10K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples news nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Amharic treebanks</h3>
 
     <!-- start of Amharic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Amharic / ATT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-am">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ATT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,245 tokens 10,010 words 10,010 nodes 1,074 sentences">10K</span></span>
@@ -567,8 +508,8 @@ <h3>Amharic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples news nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.593444"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Amharic-ATT is a manual developed Treebanks for Amharic. Sentences were collected from grammar books, fictions, biographies, religious texts and news.
 
@@ -580,11 +521,10 @@ <h3>Amharic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Amharic / ATT entry -->
-      
-    </div> <!-- end of Amharic treebank list -->
+    </details>
+    
+    <!-- end of Amharic treebank list -->
 
     
 
@@ -594,35 +534,29 @@ <h3> Language documentation </h3>
     See the <a href="am/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Amharic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Amharic accordion row -->
 
   <!-- start of Ancient Greek accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GR.svg" /></span>
-    <span class="doublewidespan">Ancient Greek</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="456,493 tokens 456,503 words 456,503 nodes 32,577 sentences">456K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Greek</span>
-  </div>
-  <!-- end of Ancient Greek accordion row -->
-
-  <!-- start of Ancient Greek accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-grc">
+      <span class="flagspan"><img class="flag" src="flags/svg/GR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Ancient Greek</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="456,493 tokens 456,503 words 456,503 nodes 32,577 sentences">456K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Greek</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Ancient Greek treebanks</h3>
 
     <!-- start of Ancient Greek treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Ancient Greek / PTNK entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-grc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PTNK</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="39,499 tokens 39,509 words 39,509 nodes 1,576 sentences">39K</span></span>
@@ -631,8 +565,8 @@ <h3>Ancient Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.690724"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Ancient Greek PTNK contains portions of the Septuagint according to the Codex Alexandrinus.
 
@@ -644,12 +578,11 @@ <h3>Ancient Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ancient Greek / PTNK entry -->
-      
-      <!-- start of Ancient Greek / PROIEL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-grc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PROIEL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="214,005 tokens 214,005 words 214,005 nodes 17,082 sentences">214K</span></span>
@@ -658,8 +591,8 @@ <h3>Ancient Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006895"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Ancient_Greek-PROIEL is converted from the Ancient Greek data in the PROIEL treebank, and consists of the New Testament plus selections from Herodotus.
 
@@ -671,12 +604,11 @@ <h3>Ancient Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ancient Greek / PROIEL entry -->
-      
-      <!-- start of Ancient Greek / Perseus entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-grc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Perseus</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="202,989 tokens 202,989 words 202,989 nodes 13,919 sentences">202K</span></span>
@@ -685,8 +617,8 @@ <h3>Ancient Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 2.5"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006862"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies Ancient Greek Treebank consists of an automatic
 conversion of a selection of passages from the Ancient Greek and Latin
@@ -700,11 +632,10 @@ <h3>Ancient Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ancient Greek / Perseus entry -->
-      
-    </div> <!-- end of Ancient Greek treebank list -->
+    </details>
+    
+    <!-- end of Ancient Greek treebank list -->
 
     
     See <a href="treebanks/grc-comparison.html">here</a> for comparative statistics of Ancient Greek treebanks.
@@ -716,35 +647,29 @@ <h3> Language documentation </h3>
     See the <a href="grc/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Ancient Greek accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Ancient Greek accordion row -->
 
   <!-- start of Ancient Hebrew accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IL.svg" /></span>
-    <span class="doublewidespan">Ancient Hebrew</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="99,944 tokens 145,866 words 145,866 nodes 5,608 sentences">145K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Ancient Hebrew accordion row -->
-
-  <!-- start of Ancient Hebrew accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-hbo">
+      <span class="flagspan"><img class="flag" src="flags/svg/IL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Ancient Hebrew</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="99,944 tokens 145,866 words 145,866 nodes 5,608 sentences">145K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Ancient Hebrew treebanks</h3>
 
     <!-- start of Ancient Hebrew treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Ancient Hebrew / PTNK entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hbo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PTNK</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="99,944 tokens 145,866 words 145,866 nodes 5,608 sentences">145K</span></span>
@@ -753,8 +678,8 @@ <h3>Ancient Hebrew treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC 4.0"><img class="license" src="logos/by-nc.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.696704"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Ancient Hebrew PTNK contains portions of the Biblia Hebraic Stuttgartensia with morphological annotations from [ETCBC](https://github.com/etcbc/bhsa) and syntactic annotations partially based on [MACULA](https://github.com/Clear-Bible/macula-hebrew/).
 
@@ -766,11 +691,10 @@ <h3>Ancient Hebrew treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ancient Hebrew / PTNK entry -->
-      
-    </div> <!-- end of Ancient Hebrew treebank list -->
+    </details>
+    
+    <!-- end of Ancient Hebrew treebank list -->
 
     
 
@@ -780,35 +704,29 @@ <h3> Language documentation </h3>
     See the <a href="hbo/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Ancient Hebrew accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Ancient Hebrew accordion row -->
 
   <!-- start of Apurina accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Apurina</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,096 tokens 1,099 words 1,099 nodes 183 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Arawakan, Purus</span>
-  </div>
-  <!-- end of Apurina accordion row -->
-
-  <!-- start of Apurina accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-apu">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Apurina</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,096 tokens 1,099 words 1,099 nodes 183 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Arawakan, Purus</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Apurina treebanks</h3>
 
     <!-- start of Apurina treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Apurina / UFPA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-apu">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UFPA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,096 tokens 1,099 words 1,099 nodes 183 sentences">1K</span></span>
@@ -817,8 +735,8 @@ <h3>Apurina treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.304811"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is an Apurinã treebank consisting of sentences from a grammatical description of the language by Maília Fernanda.
 
@@ -830,11 +748,10 @@ <h3>Apurina treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Apurina / UFPA entry -->
-      
-    </div> <!-- end of Apurina treebank list -->
+    </details>
+    
+    <!-- end of Apurina treebank list -->
 
     
 
@@ -844,35 +761,29 @@ <h3> Language documentation </h3>
     See the <a href="apu/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Apurina accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Apurina accordion row -->
 
   <!-- start of Arabic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SA-AL.svg" /></span>
-    <span class="doublewidespan">Arabic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="892,098 tokens 1,042,020 words 1,042,078 nodes 28,402 sentences">1,042K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Arabic accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ar">
+      <span class="flagspan"><img class="flag" src="flags/svg/SA-AL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Arabic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="892,098 tokens 1,042,020 words 1,042,078 nodes 28,402 sentences">1,042K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Arabic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Arabic treebanks</h3>
 
     <!-- start of Arabic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Arabic / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ar">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="20,747 tokens 20,747 words 20,747 nodes 1,000 sentences">20K</span></span>
@@ -881,8 +792,8 @@ <h3>Arabic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.496391"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -896,12 +807,11 @@ <h3>Arabic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Arabic / PUD entry -->
-      
-      <!-- start of Arabic / PADT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ar">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PADT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="242,056 tokens 282,384 words 282,442 nodes 7,664 sentences">282K</span></span>
@@ -910,8 +820,8 @@ <h3>Arabic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007240"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Arabic-PADT UD treebank is based on the
 [Prague Arabic Dependency Treebank](http://ufal.mff.cuni.cz/padt/) (PADT),
@@ -925,12 +835,11 @@ <h3>Arabic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Arabic / PADT entry -->
-      
-      <!-- start of Arabic / NYUAD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ar">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">NYUAD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="629,295 tokens 738,889 words 738,889 nodes 19,738 sentences">738K</span></span>
@@ -939,8 +848,8 @@ <h3>Arabic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000668"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The NYUAD Arabic UD treebank is based on the Penn Arabic Treebank (PATB), parts 1, 2, and 3, through conversion to CATiB dependency trees.
 
@@ -952,11 +861,10 @@ <h3>Arabic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Arabic / NYUAD entry -->
-      
-    </div> <!-- end of Arabic treebank list -->
+    </details>
+    
+    <!-- end of Arabic treebank list -->
 
     
     See <a href="treebanks/ar-comparison.html">here</a> for comparative statistics of Arabic treebanks.
@@ -968,35 +876,29 @@ <h3> Language documentation </h3>
     See the <a href="ar/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Arabic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Arabic accordion row -->
 
   <!-- start of Armenian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AM.svg" /></span>
-    <span class="doublewidespan">Armenian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="149,683 tokens 150,461 words 150,461 nodes 8,050 sentences">150K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction government grammar-examples legal medical news nonfiction reviews social web wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Armenian</span>
-  </div>
-  <!-- end of Armenian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-hy">
+      <span class="flagspan"><img class="flag" src="flags/svg/AM.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Armenian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="149,683 tokens 150,461 words 150,461 nodes 8,050 sentences">150K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction government grammar-examples legal medical news nonfiction reviews social web wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Armenian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Armenian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Armenian treebanks</h3>
 
     <!-- start of Armenian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Armenian / ArmTDP entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hy">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ArmTDP</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="103,846 tokens 104,293 words 104,293 nodes 5,527 sentences">104K</span></span>
@@ -1005,8 +907,8 @@ <h3>Armenian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction government grammar-examples legal medical news nonfiction reviews social"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.829581"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies treebank for Eastern Armenian developed for UD originally by the ArmTDP team led by Marat M. Yavrumyan at the Yerevan State University.
 
@@ -1018,12 +920,11 @@ <h3>Armenian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Armenian / ArmTDP entry -->
-      
-      <!-- start of Armenian / BSUT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hy">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BSUT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="45,837 tokens 46,168 words 46,168 nodes 2,523 sentences">46K</span></span>
@@ -1032,8 +933,8 @@ <h3>Armenian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog fiction government legal news nonfiction web wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.767369"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies treebank for Eastern Armenian developed for UD originally by the ArmTDP team led by Marat M. Yavrumyan at the V. Brusov State University in Yerevan.
 
@@ -1045,11 +946,10 @@ <h3>Armenian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Armenian / BSUT entry -->
-      
-    </div> <!-- end of Armenian treebank list -->
+    </details>
+    
+    <!-- end of Armenian treebank list -->
 
     
     See <a href="treebanks/hy-comparison.html">here</a> for comparative statistics of Armenian treebanks.
@@ -1061,35 +961,29 @@ <h3> Language documentation </h3>
     See the <a href="hy/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Armenian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Armenian accordion row -->
 
   <!-- start of Assamese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Assamese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="871 tokens 871 words 871 nodes 73 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Assamese accordion row -->
-
-  <!-- start of Assamese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-as">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Assamese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="871 tokens 871 words 871 nodes 73 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Assamese treebanks</h3>
 
     <!-- start of Assamese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Assamese / AiW entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-as">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AiW</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="871 tokens 871 words 871 nodes 73 sentences">&lt;1K</span></span>
@@ -1098,8 +992,8 @@ <h3>Assamese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.414429"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Assamese-AiW treebank is a manually annotated corpus in Assamese (Assamese script). Assamese is an Indo-Aryan language written in the Assamese script, from Left-to-Right. Word order is Subject-Object-Verb (SOV) with relatively free constituent order.
 
@@ -1111,11 +1005,10 @@ <h3>Assamese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Assamese / AiW entry -->
-      
-    </div> <!-- end of Assamese treebank list -->
+    </details>
+    
+    <!-- end of Assamese treebank list -->
 
     
 
@@ -1125,35 +1018,29 @@ <h3> Language documentation </h3>
     See the <a href="as/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Assamese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Assamese accordion row -->
 
   <!-- start of Assyrian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IQ-AII.svg" /></span>
-    <span class="doublewidespan">Assyrian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="453 tokens 453 words 453 nodes 57 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Assyrian accordion row -->
-
-  <!-- start of Assyrian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-aii">
+      <span class="flagspan"><img class="flag" src="flags/svg/IQ-AII.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Assyrian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="453 tokens 453 words 453 nodes 57 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Assyrian treebanks</h3>
 
     <!-- start of Assyrian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Assyrian / AS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-aii">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="453 tokens 453 words 453 nodes 57 sentences">&lt;1K</span></span>
@@ -1162,8 +1049,8 @@ <h3>Assyrian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.314093"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Uppsala Assyrian Treebank is a small treebank for Modern Standard Assyrian. The corpus is collected and annotated manually. The data was randomly collected from different textbooks and a short translation of The Merchant of Venice.
 
@@ -1175,11 +1062,10 @@ <h3>Assyrian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Assyrian / AS entry -->
-      
-    </div> <!-- end of Assyrian treebank list -->
+    </details>
+    
+    <!-- end of Assyrian treebank list -->
 
     
 
@@ -1189,35 +1075,29 @@ <h3> Language documentation </h3>
     See the <a href="aii/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Assyrian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Assyrian accordion row -->
 
   <!-- start of Azerbaijani accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AZ.svg" /></span>
-    <span class="doublewidespan">Azerbaijani</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="902 tokens 912 words 912 nodes 148 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Turkic, Southwestern</span>
-  </div>
-  <!-- end of Azerbaijani accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-az">
+      <span class="flagspan"><img class="flag" src="flags/svg/AZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Azerbaijani</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="902 tokens 912 words 912 nodes 148 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Turkic, Southwestern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Azerbaijani accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Azerbaijani treebanks</h3>
 
     <!-- start of Azerbaijani treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Azerbaijani / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-az">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="902 tokens 912 words 912 nodes 148 sentences">&lt;1K</span></span>
@@ -1226,8 +1106,8 @@ <h3>Azerbaijani treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.347595"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a small treebank of grammatical examples for Azerbaijani. The
 treebank tries to be neutral about the particular variety (North or
@@ -1242,11 +1122,10 @@ <h3>Azerbaijani treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Azerbaijani / TueCL entry -->
-      
-    </div> <!-- end of Azerbaijani treebank list -->
+    </details>
+    
+    <!-- end of Azerbaijani treebank list -->
 
     
 
@@ -1256,35 +1135,29 @@ <h3> Language documentation </h3>
     See the <a href="az/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Azerbaijani accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Azerbaijani accordion row -->
 
   <!-- start of Bambara accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ML.svg" /></span>
-    <span class="doublewidespan">Bambara</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="13,823 tokens 13,823 words 13,823 nodes 1,026 sentences">13K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Mande</span>
-  </div>
-  <!-- end of Bambara accordion row -->
-
-  <!-- start of Bambara accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-bm">
+      <span class="flagspan"><img class="flag" src="flags/svg/ML.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Bambara</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="13,823 tokens 13,823 words 13,823 nodes 1,026 sentences">13K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Mande</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Bambara treebanks</h3>
 
     <!-- start of Bambara treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Bambara / CRB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-bm">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CRB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="13,823 tokens 13,823 words 13,823 nodes 1,026 sentences">13K</span></span>
@@ -1293,8 +1166,8 @@ <h3>Bambara treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004496"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Bambara treebank is a section of the Corpus Référence du Bambara annotated natively with Universal Dependencies.
 
@@ -1306,11 +1179,10 @@ <h3>Bambara treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bambara / CRB entry -->
-      
-    </div> <!-- end of Bambara treebank list -->
+    </details>
+    
+    <!-- end of Bambara treebank list -->
 
     
 
@@ -1320,35 +1192,29 @@ <h3> Language documentation </h3>
     See the <a href="bm/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Bambara accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Bambara accordion row -->
 
   <!-- start of Basque accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ES-PV.svg" /></span>
-    <span class="doublewidespan">Basque</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="121,443 tokens 121,443 words 121,443 nodes 8,993 sentences">121K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Basque</span>
-  </div>
-  <!-- end of Basque accordion row -->
-
-  <!-- start of Basque accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-eu">
+      <span class="flagspan"><img class="flag" src="flags/svg/ES-PV.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Basque</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="121,443 tokens 121,443 words 121,443 nodes 8,993 sentences">121K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Basque</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Basque treebanks</h3>
 
     <!-- start of Basque treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Basque / BDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-eu">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="121,443 tokens 121,443 words 121,443 nodes 8,993 sentences">121K</span></span>
@@ -1357,8 +1223,8 @@ <h3>Basque treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006367"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Basque UD treebank is based on a automatic conversion from part of the Basque Dependency Treebank (BDT), created at the University of of the Basque Country by the IXA NLP research group. The treebank consists of 8.993 sentences (121.443 tokens) and covers mainly literary and journalistic texts.
 
@@ -1370,11 +1236,10 @@ <h3>Basque treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Basque / BDT entry -->
-      
-    </div> <!-- end of Basque treebank list -->
+    </details>
+    
+    <!-- end of Basque treebank list -->
 
     
 
@@ -1384,35 +1249,29 @@ <h3> Language documentation </h3>
     See the <a href="eu/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Basque accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Basque accordion row -->
 
   <!-- start of Bavarian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/DE-BY.svg" /></span>
-    <span class="doublewidespan">Bavarian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="14,677 tokens 15,036 words 15,036 nodes 1,070 sentences">15K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction social wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Bavarian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-bar">
+      <span class="flagspan"><img class="flag" src="flags/svg/DE-BY.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Bavarian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="14,677 tokens 15,036 words 15,036 nodes 1,070 sentences">15K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction social wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Bavarian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Bavarian treebanks</h3>
 
     <!-- start of Bavarian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Bavarian / MaiBaam entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-bar">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MaiBaam</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="14,677 tokens 15,036 words 15,036 nodes 1,070 sentences">15K</span></span>
@@ -1421,8 +1280,8 @@ <h3>Bavarian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction social wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.429032"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         MaiBaam is manually annotated with part-of-speech tag, syntactic dependencies, and German lemmas.
 The treebank encompasses diverse text genres (wiki articles and discussions, grammar examples, fiction, and commands for virtual assistants) and dialects from the North, Central and South Bavarian areas as well as the dialectal transition areas in between.
@@ -1435,11 +1294,10 @@ <h3>Bavarian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bavarian / MaiBaam entry -->
-      
-    </div> <!-- end of Bavarian treebank list -->
+    </details>
+    
+    <!-- end of Bavarian treebank list -->
 
     
 
@@ -1449,35 +1307,29 @@ <h3> Language documentation </h3>
     See the <a href="bar/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Bavarian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Bavarian accordion row -->
 
   <!-- start of Beja accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SD.svg" /></span>
-    <span class="doublewidespan">Beja</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="11,948 tokens 11,948 words 11,948 nodes 763 sentences">11K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Cushitic</span>
-  </div>
-  <!-- end of Beja accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-bej">
+      <span class="flagspan"><img class="flag" src="flags/svg/SD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Beja</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="11,948 tokens 11,948 words 11,948 nodes 763 sentences">11K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Cushitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Beja accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Beja treebanks</h3>
 
     <!-- start of Beja treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Beja / Autogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-bej">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Autogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="11,948 tokens 11,948 words 11,948 nodes 763 sentences">11K</span></span>
@@ -1486,8 +1338,8 @@ <h3>Beja treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.405285"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for Beja, North-Cushitic branch of the Afro-Asiatic phylum mainly spoken in Sudan, Egypt and Eritrea.
 
@@ -1499,11 +1351,10 @@ <h3>Beja treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Beja / Autogramm entry -->
-      
-    </div> <!-- end of Beja treebank list -->
+    </details>
+    
+    <!-- end of Beja treebank list -->
 
     
 
@@ -1513,35 +1364,29 @@ <h3> Language documentation </h3>
     See the <a href="bej/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Beja accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Beja accordion row -->
 
   <!-- start of Belarusian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BY.svg" /></span>
-    <span class="doublewidespan">Belarusian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="305,109 tokens 305,109 words 305,417 nodes 25,231 sentences">305K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction poetry social wiki"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Belarusian accordion row -->
-
-  <!-- start of Belarusian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-be">
+      <span class="flagspan"><img class="flag" src="flags/svg/BY.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Belarusian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="305,109 tokens 305,109 words 305,417 nodes 25,231 sentences">305K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction poetry social wiki"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Belarusian treebanks</h3>
 
     <!-- start of Belarusian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Belarusian / HSE entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-be">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HSE</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="305,109 tokens 305,109 words 305,417 nodes 25,231 sentences">305K</span></span>
@@ -1550,8 +1395,8 @@ <h3>Belarusian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction poetry social wiki"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.865448"><img src="/img/stars45.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Belarusian UD treebank is based on a sample of the news texts included in the Belarusian-Russian parallel subcorpus of the Russian National Corpus,
 online search available at: http://ruscorpora.ru/search-para-be.html.
@@ -1564,11 +1409,10 @@ <h3>Belarusian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Belarusian / HSE entry -->
-      
-    </div> <!-- end of Belarusian treebank list -->
+    </details>
+    
+    <!-- end of Belarusian treebank list -->
 
     
 
@@ -1578,35 +1422,29 @@ <h3> Language documentation </h3>
     See the <a href="be/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Belarusian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Belarusian accordion row -->
 
   <!-- start of Bengali accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BD.svg" /></span>
-    <span class="doublewidespan">Bengali</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="320 tokens 320 words 320 nodes 56 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Bengali accordion row -->
-
-  <!-- start of Bengali accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-bn">
+      <span class="flagspan"><img class="flag" src="flags/svg/BD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Bengali</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="320 tokens 320 words 320 nodes 56 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Bengali treebanks</h3>
 
     <!-- start of Bengali treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Bengali / BRU entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-bn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BRU</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="320 tokens 320 words 320 nodes 56 sentences">&lt;1K</span></span>
@@ -1615,8 +1453,8 @@ <h3>Bengali treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.389708"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The BRU Bengali treebank has been created at Begum Rokeya University, Rangpur, by the members of Semantics Lab.
 
@@ -1628,11 +1466,10 @@ <h3>Bengali treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bengali / BRU entry -->
-      
-    </div> <!-- end of Bengali treebank list -->
+    </details>
+    
+    <!-- end of Bengali treebank list -->
 
     
 
@@ -1642,35 +1479,29 @@ <h3> Language documentation </h3>
     See the <a href="bn/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Bengali accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Bengali accordion row -->
 
   <!-- start of Bhojpuri accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Bhojpuri</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6,665 tokens 6,665 words 6,665 nodes 357 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Bhojpuri accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-bho">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Bhojpuri</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6,665 tokens 6,665 words 6,665 nodes 357 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Bhojpuri accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Bhojpuri treebanks</h3>
 
     <!-- start of Bhojpuri treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Bhojpuri / BHTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-bho">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BHTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,665 tokens 6,665 words 6,665 nodes 357 sentences">6K</span></span>
@@ -1679,8 +1510,8 @@ <h3>Bhojpuri treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004885"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The [Bhojpuri](https://en.wikipedia.org/wiki/Bhojpuri_language) UD Treebank (BHTB) is a part of the [Universal Dependency treebank](http://universaldependencies.org/) project.
 
@@ -1692,11 +1523,10 @@ <h3>Bhojpuri treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bhojpuri / BHTB entry -->
-      
-    </div> <!-- end of Bhojpuri treebank list -->
+    </details>
+    
+    <!-- end of Bhojpuri treebank list -->
 
     
 
@@ -1706,35 +1536,29 @@ <h3> Language documentation </h3>
     See the <a href="bho/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Bhojpuri accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Bhojpuri accordion row -->
 
   <!-- start of Bokota accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PA.svg" /></span>
-    <span class="doublewidespan">Bokota</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,713 tokens 2,713 words 2,713 nodes 406 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Chibchan, Guaymiic</span>
-  </div>
-  <!-- end of Bokota accordion row -->
-
-  <!-- start of Bokota accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sab">
+      <span class="flagspan"><img class="flag" src="flags/svg/PA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Bokota</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,713 tokens 2,713 words 2,713 nodes 406 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Chibchan, Guaymiic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Bokota treebanks</h3>
 
     <!-- start of Bokota treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Bokota / ChibErgIS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sab">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ChibErgIS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,713 tokens 2,713 words 2,713 nodes 406 sentences">2K</span></span>
@@ -1743,8 +1567,8 @@ <h3>Bokota treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002740"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for Bokota, a member of the Chibchan language family. The language is spoken by about 500 speakers in Panama. The variant of the Bokota treebank is spoken in the Comarca Ngobe-Bugle, at the border of the Veraguas Province, along the Caribbean coast. The other known variant of the language is called Buglere, and is spoken in the province of Chiriqui, in Panama.
 
@@ -1756,11 +1580,10 @@ <h3>Bokota treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bokota / ChibErgIS entry -->
-      
-    </div> <!-- end of Bokota treebank list -->
+    </details>
+    
+    <!-- end of Bokota treebank list -->
 
     
 
@@ -1770,35 +1593,29 @@ <h3> Language documentation </h3>
     See the <a href="sab/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Bokota accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Bokota accordion row -->
 
   <!-- start of Bororo accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Bororo</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="160,356 tokens 160,356 words 160,356 nodes 21,384 sentences">160K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Bororoan</span>
-  </div>
-  <!-- end of Bororo accordion row -->
-
-  <!-- start of Bororo accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-bor">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Bororo</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="160,356 tokens 160,356 words 160,356 nodes 21,384 sentences">160K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Bororoan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Bororo treebanks</h3>
 
     <!-- start of Bororo treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Bororo / BDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-bor">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="160,356 tokens 160,356 words 160,356 nodes 21,384 sentences">160K</span></span>
@@ -1807,8 +1624,8 @@ <h3>Bororo treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006018"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Bororo-BDT is a compilation of annotated sentences in [Bororo](https://glottolog.org/resource/languoid/id/boro1282). The corpus encompasses sentences derived from diverse sources: grammar examples, mythological narratives, fieldwork material, and other sources. Sentence annotation and documentation by [Fabrício Ferraz Gerardi](https://languagestructure.github.io).
 
@@ -1820,11 +1637,10 @@ <h3>Bororo treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bororo / BDT entry -->
-      
-    </div> <!-- end of Bororo treebank list -->
+    </details>
+    
+    <!-- end of Bororo treebank list -->
 
     
 
@@ -1834,35 +1650,29 @@ <h3> Language documentation </h3>
     See the <a href="bor/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Bororo accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Bororo accordion row -->
 
   <!-- start of Brahui accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" /></span>
-    <span class="doublewidespan">Brahui</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="819 tokens 819 words 819 nodes 64 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Dravidian</span>
-  </div>
-  <!-- end of Brahui accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-brh">
+      <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Brahui</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="819 tokens 819 words 819 nodes 64 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Dravidian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Brahui accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Brahui treebanks</h3>
 
     <!-- start of Brahui treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Brahui / Kholum entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-brh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Kholum</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="819 tokens 819 words 819 nodes 64 sentences">&lt;1K</span></span>
@@ -1871,8 +1681,8 @@ <h3>Brahui treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.395351"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Kholum treebank is a manually annotated corpus in Brahui.
 
@@ -1884,11 +1694,10 @@ <h3>Brahui treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Brahui / Kholum entry -->
-      
-    </div> <!-- end of Brahui treebank list -->
+    </details>
+    
+    <!-- end of Brahui treebank list -->
 
     
 
@@ -1898,35 +1707,29 @@ <h3> Language documentation </h3>
     See the <a href="brh/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Brahui accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Brahui accordion row -->
 
   <!-- start of Breton accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR-BRE.svg" /></span>
-    <span class="doublewidespan">Breton</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="9,725 tokens 10,006 words 10,006 nodes 884 sentences">10K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction poetry wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Celtic</span>
-  </div>
-  <!-- end of Breton accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-br">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR-BRE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Breton</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="9,725 tokens 10,006 words 10,006 nodes 884 sentences">10K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction poetry wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Celtic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Breton accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Breton treebanks</h3>
 
     <!-- start of Breton treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Breton / KEB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-br">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KEB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="9,725 tokens 10,006 words 10,006 nodes 884 sentences">10K</span></span>
@@ -1935,8 +1738,8 @@ <h3>Breton treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction poetry wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005070"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Breton-KEB is a treebank of Breton that has been manually annotated according to the Universal Dependencies guidelines. The
 tokenisation guidelines and morphological annotation comes from a finite-state morphological analyser of Breton released as part
@@ -1950,11 +1753,10 @@ <h3>Breton treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Breton / KEB entry -->
-      
-    </div> <!-- end of Breton treebank list -->
+    </details>
+    
+    <!-- end of Breton treebank list -->
 
     
 
@@ -1964,35 +1766,29 @@ <h3> Language documentation </h3>
     See the <a href="br/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Breton accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Breton accordion row -->
 
   <!-- start of Bulgarian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BG.svg" /></span>
-    <span class="doublewidespan">Bulgarian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="156,149 tokens 156,149 words 156,149 nodes 11,138 sentences">156K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal news"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Bulgarian accordion row -->
-
-  <!-- start of Bulgarian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-bg">
+      <span class="flagspan"><img class="flag" src="flags/svg/BG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Bulgarian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="156,149 tokens 156,149 words 156,149 nodes 11,138 sentences">156K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal news"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Bulgarian treebanks</h3>
 
     <!-- start of Bulgarian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Bulgarian / BTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-bg">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="156,149 tokens 156,149 words 156,149 nodes 11,138 sentences">156K</span></span>
@@ -2001,8 +1797,8 @@ <h3>Bulgarian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction legal news"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.696910"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Bulgarian-BTB is based on the HPSG-based BulTreeBank,
 created at the Institute of Information and Communication Technologies,
@@ -2021,11 +1817,10 @@ <h3>Bulgarian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bulgarian / BTB entry -->
-      
-    </div> <!-- end of Bulgarian treebank list -->
+    </details>
+    
+    <!-- end of Bulgarian treebank list -->
 
     
 
@@ -2035,35 +1830,29 @@ <h3> Language documentation </h3>
     See the <a href="bg/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Bulgarian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Bulgarian accordion row -->
 
   <!-- start of Buryat accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-BU.svg" /></span>
-    <span class="doublewidespan">Buryat</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="10,187 tokens 10,187 words 10,187 nodes 927 sentences">10K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Mongolic</span>
-  </div>
-  <!-- end of Buryat accordion row -->
-
-  <!-- start of Buryat accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-bxr">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-BU.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Buryat</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="10,187 tokens 10,187 words 10,187 nodes 927 sentences">10K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Mongolic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Buryat treebanks</h3>
 
     <!-- start of Buryat treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Buryat / BDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-bxr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="10,187 tokens 10,187 words 10,187 nodes 927 sentences">10K</span></span>
@@ -2072,8 +1861,8 @@ <h3>Buryat treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.521378"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Buryat treebank was annotated manually natively in UD and contains grammar book sentences, along with
 news and some fiction.
@@ -2086,11 +1875,10 @@ <h3>Buryat treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Buryat / BDT entry -->
-      
-    </div> <!-- end of Buryat treebank list -->
+    </details>
+    
+    <!-- end of Buryat treebank list -->
 
     
 
@@ -2100,35 +1888,29 @@ <h3> Language documentation </h3>
     See the <a href="bxr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Buryat accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Buryat accordion row -->
 
   <!-- start of Cantonese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/HK.svg" /></span>
-    <span class="doublewidespan">Cantonese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="13,918 tokens 13,918 words 13,918 nodes 1,004 sentences">13K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Sino-Tibetan, Chinese</span>
-  </div>
-  <!-- end of Cantonese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-yue">
+      <span class="flagspan"><img class="flag" src="flags/svg/HK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Cantonese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="13,918 tokens 13,918 words 13,918 nodes 1,004 sentences">13K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Sino-Tibetan, Chinese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Cantonese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Cantonese treebanks</h3>
 
     <!-- start of Cantonese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Cantonese / HK entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-yue">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HK</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="13,918 tokens 13,918 words 13,918 nodes 1,004 sentences">13K</span></span>
@@ -2137,8 +1919,8 @@ <h3>Cantonese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004415"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Cantonese treebank (in Traditional Chinese characters) of film subtitles and of legislative proceedings
 of Hong Kong, parallel with the Chinese-HK treebank.
@@ -2151,11 +1933,10 @@ <h3>Cantonese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Cantonese / HK entry -->
-      
-    </div> <!-- end of Cantonese treebank list -->
+    </details>
+    
+    <!-- end of Cantonese treebank list -->
 
     
 
@@ -2165,35 +1946,29 @@ <h3> Language documentation </h3>
     See the <a href="yue/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Cantonese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Cantonese accordion row -->
 
   <!-- start of Cappadocian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GR-ORTHODOX.svg" /></span>
-    <span class="doublewidespan">Cappadocian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4,794 tokens 4,938 words 4,938 nodes 420 sentences">4K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Greek</span>
-  </div>
-  <!-- end of Cappadocian accordion row -->
-
-  <!-- start of Cappadocian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-cpg">
+      <span class="flagspan"><img class="flag" src="flags/svg/GR-ORTHODOX.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Cappadocian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4,794 tokens 4,938 words 4,938 nodes 420 sentences">4K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Greek</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Cappadocian treebanks</h3>
 
     <!-- start of Cappadocian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Cappadocian / AMGiC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cpg">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AMGiC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="817 tokens 820 words 820 nodes 70 sentences">&lt;1K</span></span>
@@ -2202,8 +1977,8 @@ <h3>Cappadocian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.341792"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The &#34;Asia Minor Greek in Contact&#34; treebank (AMGiC, UD_AMGiC) is compiled from sentences entailing contact-induced morphosyntactic phenomena (CIMSP) that are a result of the contact between Greek and Turkish varieties in Anatolia and in adjacent regions. The sentences are traced in Asia Minor Greek (AMG) dialectal sources. In addition to the UD analysis, the AMGiC treebank provides information concerning the sociolinguistic context within which CIMSP arise.
 
@@ -2215,12 +1990,11 @@ <h3>Cappadocian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Cappadocian / AMGiC entry -->
-      
-      <!-- start of Cappadocian / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cpg">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,977 tokens 4,118 words 4,118 nodes 350 sentences">4K</span></span>
@@ -2229,8 +2003,8 @@ <h3>Cappadocian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005002"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a treebank of Pharasiot, a critically endangered Greek dialect
 originally spoken near Cappadocia.
@@ -2244,11 +2018,10 @@ <h3>Cappadocian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Cappadocian / TueCL entry -->
-      
-    </div> <!-- end of Cappadocian treebank list -->
+    </details>
+    
+    <!-- end of Cappadocian treebank list -->
 
     
     See <a href="treebanks/cpg-comparison.html">here</a> for comparative statistics of Cappadocian treebanks.
@@ -2260,35 +2033,29 @@ <h3> Language documentation </h3>
     See the <a href="cpg/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Cappadocian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Cappadocian accordion row -->
 
   <!-- start of Catalan accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ES-CT.svg" /></span>
-    <span class="doublewidespan">Catalan</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="531,390 tokens 547,262 words 553,639 nodes 16,678 sentences">547K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Catalan accordion row -->
-
-  <!-- start of Catalan accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ca">
+      <span class="flagspan"><img class="flag" src="flags/svg/ES-CT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Catalan</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="531,390 tokens 547,262 words 553,639 nodes 16,678 sentences">547K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Catalan treebanks</h3>
 
     <!-- start of Catalan treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Catalan / AnCora entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ca">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AnCora</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="531,390 tokens 547,262 words 553,639 nodes 16,678 sentences">547K</span></span>
@@ -2297,8 +2064,8 @@ <h3>Catalan treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.748979"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Catalan data from the [AnCora](http://clic.ub.edu/corpus/) corpus.
 
@@ -2310,11 +2077,10 @@ <h3>Catalan treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Catalan / AnCora entry -->
-      
-    </div> <!-- end of Catalan treebank list -->
+    </details>
+    
+    <!-- end of Catalan treebank list -->
 
     
 
@@ -2324,35 +2090,29 @@ <h3> Language documentation </h3>
     See the <a href="ca/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Catalan accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Catalan accordion row -->
 
   <!-- start of Cebuano accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" /></span>
-    <span class="doublewidespan">Cebuano</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,295 tokens 1,394 words 1,394 nodes 198 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
-  </div>
-  <!-- end of Cebuano accordion row -->
-
-  <!-- start of Cebuano accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ceb">
+      <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Cebuano</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,295 tokens 1,394 words 1,394 nodes 198 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Cebuano treebanks</h3>
 
     <!-- start of Cebuano treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Cebuano / GJA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ceb">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GJA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,295 tokens 1,394 words 1,394 nodes 198 sentences">1K</span></span>
@@ -2361,8 +2121,8 @@ <h3>Cebuano treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.360972"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Cebuano_GJA is a collection of annotated Cebuano sample sentences randomly taken from three different sources: community-contributed samples from the website Tatoeba, a Cebuano grammar book by Bunye &amp; Yap (1971) and Tanangkinsing&#39;s reference grammar on Cebuano (2011). This project is currently work in progress.
 
@@ -2374,11 +2134,10 @@ <h3>Cebuano treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Cebuano / GJA entry -->
-      
-    </div> <!-- end of Cebuano treebank list -->
+    </details>
+    
+    <!-- end of Cebuano treebank list -->
 
     
 
@@ -2388,35 +2147,29 @@ <h3> Language documentation </h3>
     See the <a href="ceb/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Cebuano accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Cebuano accordion row -->
 
   <!-- start of Central Kurdish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" /></span>
-    <span class="doublewidespan">Central Kurdish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="660 tokens 765 words 765 nodes 138 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Central Kurdish accordion row -->
-
-  <!-- start of Central Kurdish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ckb">
+      <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Central Kurdish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="660 tokens 765 words 765 nodes 138 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Central Kurdish treebanks</h3>
 
     <!-- start of Central Kurdish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Central Kurdish / Mukri entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ckb">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Mukri</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="660 tokens 765 words 765 nodes 138 sentences">&lt;1K</span></span>
@@ -2425,8 +2178,8 @@ <h3>Central Kurdish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003772"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank contains manually annotated data for Mukri Kurdish (Indo-European) belonging to Kurdish language family, following the Universal Dependencies (UD) guidelines. It aims to offer a syntactically and morphologically consistent dataset that helps with Kurdish language processing and cross-linguistic studies. The current release includes texts in Kurdish Roman Alphabet script and provides dependency annotation at the word, phrase, and sentence levels.
 
@@ -2438,11 +2191,10 @@ <h3>Central Kurdish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Central Kurdish / Mukri entry -->
-      
-    </div> <!-- end of Central Kurdish treebank list -->
+    </details>
+    
+    <!-- end of Central Kurdish treebank list -->
 
     
 
@@ -2452,35 +2204,29 @@ <h3> Language documentation </h3>
     See the <a href="ckb/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Central Kurdish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Central Kurdish accordion row -->
 
   <!-- start of Chinese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" /></span>
-    <span class="doublewidespan">Chinese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="7 treebanks">7</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="309,906 tokens 309,906 words 309,906 nodes 14,944 sentences">309K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples learner-essays legal news spoken wiki"><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Sino-Tibetan, Chinese</span>
-  </div>
-  <!-- end of Chinese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-zh">
+      <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Chinese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="7 treebanks">7</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="309,906 tokens 309,906 words 309,906 nodes 14,944 sentences">309K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples learner-essays legal news spoken wiki"><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Sino-Tibetan, Chinese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Chinese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Chinese treebanks</h3>
 
     <!-- start of Chinese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Chinese / GSDSimp entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-zh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSDSimp</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="123,289 tokens 123,289 words 123,289 nodes 4,997 sentences">123K</span></span>
@@ -2489,8 +2235,8 @@ <h3>Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005816"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Simplified Chinese Universal Dependencies dataset converted from the GSD (traditional) dataset with manual corrections.
 
@@ -2502,12 +2248,11 @@ <h3>Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chinese / GSDSimp entry -->
-      
-      <!-- start of Chinese / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-zh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="123,289 tokens 123,289 words 123,289 nodes 4,997 sentences">123K</span></span>
@@ -2516,8 +2261,8 @@ <h3>Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005711"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Traditional Chinese Universal Dependencies Treebank annotated and converted by
 Google.
@@ -2530,12 +2275,11 @@ <h3>Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chinese / GSD entry -->
-      
-      <!-- start of Chinese / Beginner entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-zh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Beginner</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,999 tokens 19,999 words 19,999 nodes 2,295 sentences">19K</span></span>
@@ -2544,8 +2288,8 @@ <h3>Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005306"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A treebank of Chinese sentences adapted for learner of level A1 to C1 (HSK1 to 5) collected on the [Chinese Grammar Wiki](https://resources.allsetlearning.com/chinese/grammar/\) (CC BY-NC-SA 3.0 License) website. The treebank was manually annotated by researchers of Paris Nanterre University (Modyco) in the mSUD annotation schema (morpheme level Surface Universal Dependencies).
 
@@ -2557,12 +2301,11 @@ <h3>Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chinese / Beginner entry -->
-      
-      <!-- start of Chinese / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-zh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="21,415 tokens 21,415 words 21,415 nodes 1,000 sentences">21K</span></span>
@@ -2571,8 +2314,8 @@ <h3>Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004427"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -2586,12 +2329,11 @@ <h3>Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chinese / PUD entry -->
-      
-      <!-- start of Chinese / HK entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-zh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HK</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="9,874 tokens 9,874 words 9,874 nodes 1,004 sentences">9K</span></span>
@@ -2600,8 +2342,8 @@ <h3>Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004162"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Traditional Chinese treebank of film subtitles and of legislative proceedings
 of Hong Kong, parallel with the Cantonese-HK treebank.
@@ -2614,12 +2356,11 @@ <h3>Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chinese / HK entry -->
-      
-      <!-- start of Chinese / CFL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-zh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CFL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="7,256 tokens 7,256 words 7,256 nodes 451 sentences">7K</span></span>
@@ -2628,8 +2369,8 @@ <h3>Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003795"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Chinese-CFL UD treebank is manually annotated by Keying Li with minor manual revisions by Herman Leung and John Lee at City University of Hong Kong, based on essays written by learners of Mandarin Chinese as a foreign language. The data is in Simplified Chinese.
 
@@ -2641,12 +2382,11 @@ <h3>Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chinese / CFL entry -->
-      
-      <!-- start of Chinese / PatentChar entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-zh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PatentChar</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4,784 tokens 4,784 words 4,784 nodes 200 sentences">4K</span></span>
@@ -2655,8 +2395,8 @@ <h3>Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002488"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A treebank of Chinese patent application texts collected from the Chinese patent office&#39;s website CNIPA.
 
@@ -2670,11 +2410,10 @@ <h3>Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chinese / PatentChar entry -->
-      
-    </div> <!-- end of Chinese treebank list -->
+    </details>
+    
+    <!-- end of Chinese treebank list -->
 
     
     See <a href="treebanks/zh-comparison.html">here</a> for comparative statistics of Chinese treebanks.
@@ -2686,35 +2425,29 @@ <h3> Language documentation </h3>
     See the <a href="zh/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Chinese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Chinese accordion row -->
 
   <!-- start of Chintang accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NP.svg" /></span>
-    <span class="doublewidespan">Chintang</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="12,758 tokens 14,631 words 14,631 nodes 2,289 sentences">14K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Sino-Tibetan, Himalayish</span>
-  </div>
-  <!-- end of Chintang accordion row -->
-
-  <!-- start of Chintang accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ctn">
+      <span class="flagspan"><img class="flag" src="flags/svg/NP.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Chintang</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="12,758 tokens 14,631 words 14,631 nodes 2,289 sentences">14K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Sino-Tibetan, Himalayish</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Chintang treebanks</h3>
 
     <!-- start of Chintang treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Chintang / CTNTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ctn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CTNTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="12,758 tokens 14,631 words 14,631 nodes 2,289 sentences">14K</span></span>
@@ -2723,8 +2456,8 @@ <h3>Chintang treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.523744"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD\_Chintang-CTNTB is a Universal Dependencies (UD) treebank for the Chintang language. The annotation converted from glosses from &#34;A Grammar of Chintang A Tibeto-Burman Language of Nepal&#34; by Robert Schikowski.
 
@@ -2736,11 +2469,10 @@ <h3>Chintang treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chintang / CTNTB entry -->
-      
-    </div> <!-- end of Chintang treebank list -->
+    </details>
+    
+    <!-- end of Chintang treebank list -->
 
     
 
@@ -2750,35 +2482,29 @@ <h3> Language documentation </h3>
     See the <a href="ctn/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Chintang accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Chintang accordion row -->
 
   <!-- start of Chukchi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-CHU.svg" /></span>
-    <span class="doublewidespan">Chukchi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="5,389 tokens 6,124 words 6,211 nodes 1,004 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Chukotko-Kamchatkan</span>
-  </div>
-  <!-- end of Chukchi accordion row -->
-
-  <!-- start of Chukchi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ckt">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-CHU.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Chukchi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="5,389 tokens 6,124 words 6,211 nodes 1,004 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Chukotko-Kamchatkan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Chukchi treebanks</h3>
 
     <!-- start of Chukchi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Chukchi / HSE entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ckt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HSE</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,389 tokens 6,124 words 6,211 nodes 1,004 sentences">6K</span></span>
@@ -2787,8 +2513,8 @@ <h3>Chukchi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002875"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This data is a manual annotation of the corpus from multimedia annotated corpus
 of the [Chuklang](http://chuklang.ru/) project, a dialectal corpus of the Amguema
@@ -2802,11 +2528,10 @@ <h3>Chukchi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Chukchi / HSE entry -->
-      
-    </div> <!-- end of Chukchi treebank list -->
+    </details>
+    
+    <!-- end of Chukchi treebank list -->
 
     
 
@@ -2816,35 +2541,29 @@ <h3> Language documentation </h3>
     See the <a href="ckt/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Chukchi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Chukchi accordion row -->
 
   <!-- start of Classical Armenian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AM-ARSACID.svg" /></span>
-    <span class="doublewidespan">Classical Armenian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="99,006 tokens 99,664 words 99,664 nodes 4,781 sentences">99K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">IE, Armenian</span>
-  </div>
-  <!-- end of Classical Armenian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-xcl">
+      <span class="flagspan"><img class="flag" src="flags/svg/AM-ARSACID.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Classical Armenian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="99,006 tokens 99,664 words 99,664 nodes 4,781 sentences">99K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">IE, Armenian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Classical Armenian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Classical Armenian treebanks</h3>
 
     <!-- start of Classical Armenian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Classical Armenian / CAVaL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-xcl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CAVaL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="99,006 tokens 99,664 words 99,664 nodes 4,781 sentences">99K</span></span>
@@ -2853,8 +2572,8 @@ <h3>Classical Armenian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.686610"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The present release includes the Classical Armenian translation of the Gospels and the first book of the &#34;History of the Armenians&#34; by Movses Khorenatsi. The annotation of the Gospels results from a rule-based conversion from the PROIEL annotation, manually corrected and extended with additional information. The annotation of the &#34;History of the Armenians&#34; has been performed by a UDPipe2 annotator and manually corrected.
 
@@ -2866,11 +2585,10 @@ <h3>Classical Armenian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Classical Armenian / CAVaL entry -->
-      
-    </div> <!-- end of Classical Armenian treebank list -->
+    </details>
+    
+    <!-- end of Classical Armenian treebank list -->
 
     
 
@@ -2880,35 +2598,29 @@ <h3> Language documentation </h3>
     See the <a href="xcl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Classical Armenian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Classical Armenian accordion row -->
 
   <!-- start of Classical Chinese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CN-QING.svg" /></span>
-    <span class="doublewidespan">Classical Chinese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="433,817 tokens 433,817 words 433,817 nodes 86,339 sentences">433K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction poetry"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
-    <span class="triplewidespan">Sino-Tibetan, Chinese</span>
-  </div>
-  <!-- end of Classical Chinese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-lzh">
+      <span class="flagspan"><img class="flag" src="flags/svg/CN-QING.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Classical Chinese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="433,817 tokens 433,817 words 433,817 nodes 86,339 sentences">433K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction poetry"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
+      <span class="triplewidespan">Sino-Tibetan, Chinese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Classical Chinese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Classical Chinese treebanks</h3>
 
     <!-- start of Classical Chinese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Classical Chinese / Kyoto entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-lzh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Kyoto</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="433,169 tokens 433,169 words 433,169 nodes 86,239 sentences">433K</span></span>
@@ -2917,8 +2629,8 @@ <h3>Classical Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction poetry"><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="PD">?</span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.743385"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Classical Chinese Universal Dependencies Treebank annotated and converted by Institute for Research in Humanities, Kyoto University.
 
@@ -2930,12 +2642,11 @@ <h3>Classical Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Classical Chinese / Kyoto entry -->
-      
-      <!-- start of Classical Chinese / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-lzh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="648 tokens 648 words 648 nodes 100 sentences">&lt;1K</span></span>
@@ -2944,8 +2655,8 @@ <h3>Classical Chinese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003144"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A dependency Treebank of &#34;逍遥游(Enjoyment in Untroubled Ease)&#34; written by Zhuangzi.
 
@@ -2957,11 +2668,10 @@ <h3>Classical Chinese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Classical Chinese / TueCL entry -->
-      
-    </div> <!-- end of Classical Chinese treebank list -->
+    </details>
+    
+    <!-- end of Classical Chinese treebank list -->
 
     
     See <a href="treebanks/lzh-comparison.html">here</a> for comparative statistics of Classical Chinese treebanks.
@@ -2973,35 +2683,29 @@ <h3> Language documentation </h3>
     See the <a href="lzh/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Classical Chinese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Classical Chinese accordion row -->
 
   <!-- start of Coptic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/COP.svg" /></span>
-    <span class="doublewidespan">Coptic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="42,950 tokens 91,697 words 91,697 nodes 3,253 sentences">91K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Egyptian</span>
-  </div>
-  <!-- end of Coptic accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-cop">
+      <span class="flagspan"><img class="flag" src="flags/svg/COP.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Coptic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="42,950 tokens 91,697 words 91,697 nodes 3,253 sentences">91K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Egyptian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Coptic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Coptic treebanks</h3>
 
     <!-- start of Coptic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Coptic / Scriptorium entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cop">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Scriptorium</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="27,693 tokens 58,974 words 58,974 nodes 2,252 sentences">58K</span></span>
@@ -3010,8 +2714,8 @@ <h3>Coptic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.647282"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Coptic contains manually annotated Sahidic Coptic texts, including Biblical texts, sermons, letters, and hagiography.
 
@@ -3023,12 +2727,11 @@ <h3>Coptic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Coptic / Scriptorium entry -->
-      
-      <!-- start of Coptic / Bohairic entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cop">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Bohairic</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="15,257 tokens 32,723 words 32,723 nodes 1,001 sentences">32K</span></span>
@@ -3037,8 +2740,8 @@ <h3>Coptic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.585250"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Coptic-Bohairic contains manually annotated Bohairic Coptic texts, including Biblical narrative and poetic texts, epistles, and hagiography.
 
@@ -3050,11 +2753,10 @@ <h3>Coptic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Coptic / Bohairic entry -->
-      
-    </div> <!-- end of Coptic treebank list -->
+    </details>
+    
+    <!-- end of Coptic treebank list -->
 
     
     See <a href="treebanks/cop-comparison.html">here</a> for comparative statistics of Coptic treebanks.
@@ -3066,35 +2768,29 @@ <h3> Language documentation </h3>
     See the <a href="cop/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Coptic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Coptic accordion row -->
 
   <!-- start of Croatian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/HR.svg" /></span>
-    <span class="doublewidespan">Croatian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="199,409 tokens 199,409 words 199,409 nodes 9,010 sentences">199K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news web wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Croatian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-hr">
+      <span class="flagspan"><img class="flag" src="flags/svg/HR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Croatian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="199,409 tokens 199,409 words 199,409 nodes 9,010 sentences">199K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news web wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Croatian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Croatian treebanks</h3>
 
     <!-- start of Croatian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Croatian / SET entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SET</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="199,409 tokens 199,409 words 199,409 nodes 9,010 sentences">199K</span></span>
@@ -3103,8 +2799,8 @@ <h3>Croatian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news web wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.745280"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Croatian UD treebank is based on the extension of the SETimes-HR corpus, the [hr500k](http://hdl.handle.net/11356/1183) corpus.
 
@@ -3116,11 +2812,10 @@ <h3>Croatian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Croatian / SET entry -->
-      
-    </div> <!-- end of Croatian treebank list -->
+    </details>
+    
+    <!-- end of Croatian treebank list -->
 
     
 
@@ -3130,35 +2825,29 @@ <h3> Language documentation </h3>
     See the <a href="hr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Croatian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Croatian accordion row -->
 
   <!-- start of Czech accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CZ.svg" /></span>
-    <span class="doublewidespan">Czech</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4,152,650 tokens 4,162,402 words 4,284,342 nodes 253,784 sentences">4,162K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction legal news nonfiction poetry reviews social spoken wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Czech accordion row -->
-
-  <!-- start of Czech accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-cs">
+      <span class="flagspan"><img class="flag" src="flags/svg/CZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Czech</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4,152,650 tokens 4,162,402 words 4,284,342 nodes 253,784 sentences">4,162K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction legal news nonfiction poetry reviews social spoken wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Czech treebanks</h3>
 
     <!-- start of Czech treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Czech / PDTC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PDTC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,432,078 tokens 3,440,052 words 3,560,971 nodes 213,897 sentences">3,440K</span></span>
@@ -3167,8 +2856,8 @@ <h3>Czech treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic news nonfiction reviews social spoken"><i class="fa fa-graduation-cap"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.870671"><img src="/img/stars45.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Czech-PDTC UD treebank is based on the Prague Dependency Treebank – Consolidated
 (PDT-C) 2.0, created at the Charles University in Prague.
@@ -3181,12 +2870,11 @@ <h3>Czech treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Czech / PDTC entry -->
-      
-      <!-- start of Czech / CAC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CAC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="493,306 tokens 494,383 words 495,212 nodes 24,709 sentences">494K</span></span>
@@ -3195,8 +2883,8 @@ <h3>Czech treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic legal news nonfiction reviews"><i class="fa fa-graduation-cap"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.781082"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD_Czech-CAC treebank is based on the Czech Academic Corpus 2.0 (CAC;
 Český akademický korpus; ČAK), created at Charles University in Prague.
@@ -3209,12 +2897,11 @@ <h3>Czech treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Czech / CAC entry -->
-      
-      <!-- start of Czech / FicTree entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">FicTree</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="166,432 tokens 167,056 words 167,225 nodes 12,760 sentences">167K</span></span>
@@ -3223,8 +2910,8 @@ <h3>Czech treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.692989"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         FicTree is a treebank of Czech fiction, automatically converted into the UD
 format. The treebank was built at Charles University in Prague.
@@ -3237,12 +2924,11 @@ <h3>Czech treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Czech / FicTree entry -->
-      
-      <!-- start of Czech / CLTT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CLTT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="35,997 tokens 36,013 words 36,023 nodes 1,121 sentences">36K</span></span>
@@ -3251,8 +2937,8 @@ <h3>Czech treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.598281"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD_Czech-CLTT treebank is based on the Czech Legal Text Treebank 2.0,
 created at the Charles University in Prague.
@@ -3265,12 +2951,11 @@ <h3>Czech treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Czech / CLTT entry -->
-      
-      <!-- start of Czech / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="18,564 tokens 18,609 words 18,622 nodes 1,000 sentences">18K</span></span>
@@ -3279,8 +2964,8 @@ <h3>Czech treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.543589"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -3294,12 +2979,11 @@ <h3>Czech treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Czech / PUD entry -->
-      
-      <!-- start of Czech / Poetry entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Poetry</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,273 tokens 6,289 words 6,289 nodes 297 sentences">6K</span></span>
@@ -3308,8 +2992,8 @@ <h3>Czech treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="poetry"><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.521861"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Czech-Poetry contains random samples of Czech 19th-century poetry from the Corpus of Czech Verse parsed with UDPipe2 (trained on UD Czech-PDT 2.11) and manually corrected.
 
@@ -3321,11 +3005,10 @@ <h3>Czech treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Czech / Poetry entry -->
-      
-    </div> <!-- end of Czech treebank list -->
+    </details>
+    
+    <!-- end of Czech treebank list -->
 
     
     See <a href="treebanks/cs-comparison.html">here</a> for comparative statistics of Czech treebanks.
@@ -3337,35 +3020,29 @@ <h3> Language documentation </h3>
     See the <a href="cs/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Czech accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Czech accordion row -->
 
   <!-- start of Danish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/DK.svg" /></span>
-    <span class="doublewidespan">Danish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="100,733 tokens 100,733 words 100,733 nodes 5,512 sentences">100K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Danish accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-da">
+      <span class="flagspan"><img class="flag" src="flags/svg/DK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Danish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="100,733 tokens 100,733 words 100,733 nodes 5,512 sentences">100K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Danish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Danish treebanks</h3>
 
     <!-- start of Danish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Danish / DDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-da">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="100,733 tokens 100,733 words 100,733 nodes 5,512 sentences">100K</span></span>
@@ -3374,8 +3051,8 @@ <h3>Danish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006944"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Danish UD treebank is a conversion of the Danish Dependency Treebank.
 
@@ -3387,11 +3064,10 @@ <h3>Danish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Danish / DDT entry -->
-      
-    </div> <!-- end of Danish treebank list -->
+    </details>
+    
+    <!-- end of Danish treebank list -->
 
     
 
@@ -3401,35 +3077,29 @@ <h3> Language documentation </h3>
     See the <a href="da/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Danish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Danish accordion row -->
 
   <!-- start of Dutch accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NL.svg" /></span>
-    <span class="doublewidespan">Dutch</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="505,678 tokens 505,679 words 506,225 nodes 30,723 sentences">505K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Dutch accordion row -->
-
-  <!-- start of Dutch accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-nl">
+      <span class="flagspan"><img class="flag" src="flags/svg/NL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Dutch</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="505,678 tokens 505,679 words 506,225 nodes 30,723 sentences">505K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Dutch treebanks</h3>
 
     <!-- start of Dutch treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Dutch / LassySmall entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-nl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LassySmall</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="297,065 tokens 297,065 words 297,481 nodes 17,120 sentences">297K</span></span>
@@ -3438,8 +3108,8 @@ <h3>Dutch treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.716645"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This corpus contains sentences from the Wikipedia section of the Lassy Small Treebank.
 Universal Dependency annotation was generated automatically from the original annotation in Lassy.
@@ -3452,12 +3122,11 @@ <h3>Dutch treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Dutch / LassySmall entry -->
-      
-      <!-- start of Dutch / Alpino entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-nl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Alpino</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="208,613 tokens 208,614 words 208,744 nodes 13,603 sentences">208K</span></span>
@@ -3466,8 +3135,8 @@ <h3>Dutch treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.697693"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This corpus consists of samples from various treebanks annotated at the University of Groningen using the Alpino annotation tools and guidelines.
 
@@ -3479,11 +3148,10 @@ <h3>Dutch treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Dutch / Alpino entry -->
-      
-    </div> <!-- end of Dutch treebank list -->
+    </details>
+    
+    <!-- end of Dutch treebank list -->
 
     
     See <a href="treebanks/nl-comparison.html">here</a> for comparative statistics of Dutch treebanks.
@@ -3495,35 +3163,29 @@ <h3> Language documentation </h3>
     See the <a href="nl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Dutch accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Dutch accordion row -->
 
   <!-- start of Egyptian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/EG.svg" /></span>
-    <span class="doublewidespan">Egyptian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="32,796 tokens 34,234 words 34,234 nodes 3,089 sentences">34K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction government nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Egyptian</span>
-  </div>
-  <!-- end of Egyptian accordion row -->
-
-  <!-- start of Egyptian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-egy">
+      <span class="flagspan"><img class="flag" src="flags/svg/EG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Egyptian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="32,796 tokens 34,234 words 34,234 nodes 3,089 sentences">34K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction government nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Egyptian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Egyptian treebanks</h3>
 
     <!-- start of Egyptian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Egyptian / PC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-egy">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="32,796 tokens 34,234 words 34,234 nodes 3,089 sentences">34K</span></span>
@@ -3532,8 +3194,8 @@ <h3>Egyptian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction government nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.692660"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Egyptian-PC is the first dependency treebank created for the morphosyntactic annotation of pre-Coptic Egyptian. It is developed at the University of Jaén. Its current state (UD v2.18) consists of 3,089 sentences and 34,234 tokens manually annotated from the Pyramid Texts.
 
@@ -3545,11 +3207,10 @@ <h3>Egyptian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Egyptian / PC entry -->
-      
-    </div> <!-- end of Egyptian treebank list -->
+    </details>
+    
+    <!-- end of Egyptian treebank list -->
 
     
 
@@ -3559,35 +3220,29 @@ <h3> Language documentation </h3>
     See the <a href="egy/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Egyptian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Egyptian accordion row -->
 
   <!-- start of English accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GB.svg" /></span>
-    <span class="doublewidespan">English</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="13 treebanks">13</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,102,940 tokens 1,126,448 words 1,126,652 nodes 98,986 sentences">1,126K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog email fiction government grammar-examples legal medical news nonfiction poetry reviews social spoken web wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-envelope"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of English accordion row -->
-
-  <!-- start of English accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-en">
+      <span class="flagspan"><img class="flag" src="flags/svg/GB.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">English</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="13 treebanks">13</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,102,940 tokens 1,126,448 words 1,126,652 nodes 98,986 sentences">1,126K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog email fiction government grammar-examples legal medical news nonfiction poetry reviews social spoken web wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-envelope"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>English treebanks</h3>
 
     <!-- start of English treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of English / GUM entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GUM</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="252,284 tokens 256,739 words 256,893 nodes 14,353 sentences">256K</span></span>
@@ -3596,8 +3251,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic blog email fiction government legal news nonfiction social spoken web wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-envelope"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.842613"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Universal Dependencies syntax annotations from the GUM corpus (https://gucorpling.org/gum/)
 
@@ -3609,12 +3264,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / GUM entry -->
-      
-      <!-- start of English / EWT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">EWT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="251,491 tokens 254,820 words 254,863 nodes 16,622 sentences">254K</span></span>
@@ -3623,8 +3277,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog email reviews social web"><i class="fa fa-calendar"></i><i class="fa fa-envelope"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.765668"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Gold Standard Universal Dependencies Corpus for English,
 built over the source material of the English Web Treebank
@@ -3638,12 +3292,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / EWT entry -->
-      
-      <!-- start of English / LinES entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LinES</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="105,137 tokens 106,307 words 106,307 nodes 5,696 sentences">106K</span></span>
@@ -3652,8 +3305,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.656900"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD English_LinES is the English half of the LinES Parallel Treebank
 with the original dependency annotation first automatically converted
@@ -3668,12 +3321,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / LinES entry -->
-      
-      <!-- start of English / ParTUT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ParTUT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="49,033 tokens 49,478 words 49,478 nodes 2,090 sentences">49K</span></span>
@@ -3682,8 +3334,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal news wiki"><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.642080"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_English-ParTUT is a conversion of a multilingual parallel treebank developed at the University of Turin,
 and consisting of a variety of text genres, including talks, legal texts and Wikipedia articles, among others.
@@ -3696,12 +3348,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / ParTUT entry -->
-      
-      <!-- start of English / Atis entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Atis</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="61,473 tokens 61,879 words 61,879 nodes 5,432 sentences">61K</span></span>
@@ -3710,8 +3361,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.640136"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Atis Treebank is a manually annotated treebank consisting of the sentences in the Atis (Airline Travel Informations) dataset which includes the human speech transcriptions of people asking for flight information on the automated inquiry systems.
 
@@ -3723,12 +3374,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / Atis entry -->
-      
-      <!-- start of English / GENTLE entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GENTLE</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="17,619 tokens 17,799 words 17,799 nodes 1,334 sentences">17K</span></span>
@@ -3737,8 +3387,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic grammar-examples legal medical nonfiction poetry social spoken"><i class="fa fa-graduation-cap"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.622932"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Repository for the Genre Tests for Linguistic Evaluation (GENTLE) Corpus
 
@@ -3750,12 +3400,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / GENTLE entry -->
-      
-      <!-- start of English / CHILDES entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CHILDES</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="289,817 tokens 302,740 words 302,740 nodes 48,183 sentences">302K</span></span>
@@ -3764,8 +3413,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.574660"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This repository contains Universal Dependencies (UD) trees for utterances from child–adult spoken interactions in English, drawn from [CHILDES](https://childes.talkbank.org/) transcripts.
 
@@ -3777,12 +3426,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / CHILDES entry -->
-      
-      <!-- start of English / LittlePrince entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LittlePrince</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,852 tokens 6,852 words 6,852 nodes 500 sentences">6K</span></span>
@@ -3791,8 +3439,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.532994"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank contains manually corrected Universal Dependency annotations for 500 sentences from the English translation of *The Little Prince*.
 
@@ -3804,12 +3452,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / LittlePrince entry -->
-      
-      <!-- start of English / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="21,051 tokens 21,180 words 21,187 nodes 1,000 sentences">21K</span></span>
@@ -3818,8 +3465,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.506331"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is the English portion of the Parallel Universal Dependencies (PUD)
 treebanks created for the CoNLL 2017 shared task on Multilingual Parsing
@@ -3834,12 +3481,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / PUD entry -->
-      
-      <!-- start of English / CTeTex entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CTeTex</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="9,273 tokens 9,273 words 9,273 nodes 276 sentences">9K</span></span>
@@ -3848,8 +3494,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.500197"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_English-CTeTex is a technical text corpus annotated in Universal Dependency syntax containing 196 software requirements.
 
@@ -3861,12 +3507,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / CTeTex entry -->
-      
-      <!-- start of English / Pronouns entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Pronouns</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,640 tokens 1,705 words 1,705 nodes 285 sentences">1K</span></span>
@@ -3875,8 +3520,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.408777"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD English-Pronouns is dataset created to make pronoun identification more accurate and with a more balanced distribution across genders. The dataset is initially targeting the Independent Genitive pronouns, &#34;hers&#34;, (independent) &#34;his&#34;, (singular) &#34;theirs&#34;, &#34;mine&#34;, and (singular) &#34;yours&#34;.
 
@@ -3888,12 +3533,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / Pronouns entry -->
-      
-      <!-- start of English / GUMReddit entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GUMReddit</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="15,958 tokens 16,364 words 16,364 nodes 895 sentences">16K</span></span>
@@ -3902,8 +3546,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog social"><i class="fa fa-calendar"></i><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.046838"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Universal Dependencies syntax annotations from the Reddit portion of the GUM corpus (https://gucorpling.org/gum/)
 
@@ -3915,12 +3559,11 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / GUMReddit entry -->
-      
-      <!-- start of English / ESLSpok entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ESLSpok</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="21,312 tokens 21,312 words 21,312 nodes 2,320 sentences">21K</span></span>
@@ -3929,8 +3572,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003938"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This repository includes the Dependency Treebank of Spoken L2 English (SL2E), which consists of Universal Dependency annotations for a random sample of sentences from the &lt;a href=&#34;https://alaginrc.nict.go.jp/nict_jle/index_E.html&#34; target=&#34;_blank&#34;&gt;NICT JLE&lt;/a&gt;, a corpus of spoken second language English. &lt;a href=&#34;https://github.com/LCR-ADS-Lab/SL2E-Dependency-Treebank&#34; target=&#34;_blank&#34;&gt;The homepage of the project is here.&lt;/a&gt;
 
@@ -3942,11 +3585,10 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / ESLSpok entry -->
-      
-    </div> <!-- end of English treebank list -->
+    </details>
+    
+    <!-- end of English treebank list -->
 
     
     See <a href="treebanks/en-comparison.html">here</a> for comparative statistics of English treebanks.
@@ -3958,35 +3600,29 @@ <h3> Language documentation </h3>
     See the <a href="en/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of English accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of English accordion row -->
 
   <!-- start of Erzya accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-ERZYA.svg" /></span>
-    <span class="doublewidespan">Erzya</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="20,729 tokens 20,809 words 20,809 nodes 2,152 sentences">20K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Uralic, Mordvin</span>
-  </div>
-  <!-- end of Erzya accordion row -->
-
-  <!-- start of Erzya accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-myv">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-ERZYA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Erzya</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="20,729 tokens 20,809 words 20,809 nodes 2,152 sentences">20K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Uralic, Mordvin</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Erzya treebanks</h3>
 
     <!-- start of Erzya treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Erzya / JR entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-myv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">JR</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="20,729 tokens 20,809 words 20,809 nodes 2,152 sentences">20K</span></span>
@@ -3995,8 +3631,8 @@ <h3>Erzya treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.579087"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Erzya is the original annotation (CoNLL-U) for texts in the Erzya language,
 it originally consists of a sample from a number of fiction authors writing originals in Erzya.
@@ -4009,11 +3645,10 @@ <h3>Erzya treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Erzya / JR entry -->
-      
-    </div> <!-- end of Erzya treebank list -->
+    </details>
+    
+    <!-- end of Erzya treebank list -->
 
     
 
@@ -4023,35 +3658,29 @@ <h3> Language documentation </h3>
     See the <a href="myv/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Erzya accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Erzya accordion row -->
 
   <!-- start of Esperanto accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ESPERANTO.svg" /></span>
-    <span class="doublewidespan">Esperanto</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,343 tokens 3,343 words 3,343 nodes 151 sentences">3K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples legal"><i class="fa fa-magic"></i><i class="fa fa-legal"></i></span></span>
-    <span class="triplewidespan">Constructed</span>
-  </div>
-  <!-- end of Esperanto accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-eo">
+      <span class="flagspan"><img class="flag" src="flags/svg/ESPERANTO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Esperanto</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,343 tokens 3,343 words 3,343 nodes 151 sentences">3K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples legal"><i class="fa fa-magic"></i><i class="fa fa-legal"></i></span></span>
+      <span class="triplewidespan">Constructed</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Esperanto accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Esperanto treebanks</h3>
 
     <!-- start of Esperanto treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Esperanto / Prago entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-eo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Prago</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,166 tokens 3,166 words 3,166 nodes 131 sentences">3K</span></span>
@@ -4060,8 +3689,8 @@ <h3>Esperanto treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.460509"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Esperanto-Prago is the Universal Dependencies syntax annotation on Manifesto de Prago (Prague Manifesto) and Deklaratio pri Homaranismo.
 
@@ -4073,12 +3702,11 @@ <h3>Esperanto treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Esperanto / Prago entry -->
-      
-      <!-- start of Esperanto / Cairo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-eo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Cairo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="177 tokens 177 words 177 nodes 20 sentences">&lt;1K</span></span>
@@ -4087,8 +3715,8 @@ <h3>Esperanto treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.389708"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is an example treebank made to ilustrate UD annotation choices made for Esperanto based on the Cairo sample sentences.
 
@@ -4100,11 +3728,10 @@ <h3>Esperanto treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Esperanto / Cairo entry -->
-      
-    </div> <!-- end of Esperanto treebank list -->
+    </details>
+    
+    <!-- end of Esperanto treebank list -->
 
     
     See <a href="treebanks/eo-comparison.html">here</a> for comparative statistics of Esperanto treebanks.
@@ -4116,35 +3743,29 @@ <h3> Language documentation </h3>
     See the <a href="eo/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Esperanto accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Esperanto accordion row -->
 
   <!-- start of Estonian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/EE.svg" /></span>
-    <span class="doublewidespan">Estonian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="528,370 tokens 528,372 words 529,010 nodes 38,120 sentences">528K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction news nonfiction social web"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i></span></span>
-    <span class="triplewidespan">Uralic, Finnic</span>
-  </div>
-  <!-- end of Estonian accordion row -->
-
-  <!-- start of Estonian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-et">
+      <span class="flagspan"><img class="flag" src="flags/svg/EE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Estonian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="528,370 tokens 528,372 words 529,010 nodes 38,120 sentences">528K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction news nonfiction social web"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i></span></span>
+      <span class="triplewidespan">Uralic, Finnic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Estonian treebanks</h3>
 
     <!-- start of Estonian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Estonian / EDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-et">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">EDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="437,787 tokens 437,788 words 438,316 nodes 30,930 sentences">437K</span></span>
@@ -4153,8 +3774,8 @@ <h3>Estonian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic fiction news nonfiction"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.768391"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Estonian is a converted version of the Estonian Dependency Treebank (EDT), originally annotated in the Constraint Grammar (CG) annotation scheme, and consisting of genres of fiction, newspaper texts and scientific texts. The treebank contains 30,972 trees, 437,769 tokens.
 
@@ -4166,12 +3787,11 @@ <h3>Estonian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Estonian / EDT entry -->
-      
-      <!-- start of Estonian / EWT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-et">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">EWT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="90,583 tokens 90,584 words 90,694 nodes 7,190 sentences">90K</span></span>
@@ -4180,8 +3800,8 @@ <h3>Estonian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog social web"><i class="fa fa-calendar"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.680150"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD EWT treebank consists of different genres of new media. The treebank contains 7,190 trees, 90,585 tokens.
 
@@ -4193,11 +3813,10 @@ <h3>Estonian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Estonian / EWT entry -->
-      
-    </div> <!-- end of Estonian treebank list -->
+    </details>
+    
+    <!-- end of Estonian treebank list -->
 
     
     See <a href="treebanks/et-comparison.html">here</a> for comparative statistics of Estonian treebanks.
@@ -4209,35 +3828,29 @@ <h3> Language documentation </h3>
     See the <a href="et/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Estonian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Estonian accordion row -->
 
   <!-- start of Faroese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FO.svg" /></span>
-    <span class="doublewidespan">Faroese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="50,473 tokens 50,486 words 50,486 nodes 2,829 sentences">50K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Faroese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-fo">
+      <span class="flagspan"><img class="flag" src="flags/svg/FO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Faroese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="50,473 tokens 50,486 words 50,486 nodes 2,829 sentences">50K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Faroese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Faroese treebanks</h3>
 
     <!-- start of Faroese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Faroese / OFT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">OFT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="10,002 tokens 10,002 words 10,002 nodes 1,208 sentences">10K</span></span>
@@ -4246,8 +3859,8 @@ <h3>Faroese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005094"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a treebank of Faroese based on the Faroese Wikipedia.
 
@@ -4259,12 +3872,11 @@ <h3>Faroese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Faroese / OFT entry -->
-      
-      <!-- start of Faroese / FarPaHC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">FarPaHC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="40,471 tokens 40,484 words 40,484 nodes 1,621 sentences">40K</span></span>
@@ -4273,8 +3885,8 @@ <h3>Faroese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004879"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Faroese-FarPaHC is a conversion of the [Faroese Parsed Historical Corpus (FarPaHC)](https://github.com/einarfs/farpahc) to the Universal Dependencies scheme.
 
@@ -4288,11 +3900,10 @@ <h3>Faroese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Faroese / FarPaHC entry -->
-      
-    </div> <!-- end of Faroese treebank list -->
+    </details>
+    
+    <!-- end of Faroese treebank list -->
 
     
     See <a href="treebanks/fo-comparison.html">here</a> for comparative statistics of Faroese treebanks.
@@ -4304,35 +3915,29 @@ <h3> Language documentation </h3>
     See the <a href="fo/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Faroese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Faroese accordion row -->
 
   <!-- start of Finnish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FI.svg" /></span>
-    <span class="doublewidespan">Finnish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="396,434 tokens 397,014 words 397,279 nodes 36,981 sentences">397K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction grammar-examples legal medical news poetry social web wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Uralic, Finnic</span>
-  </div>
-  <!-- end of Finnish accordion row -->
-
-  <!-- start of Finnish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-fi">
+      <span class="flagspan"><img class="flag" src="flags/svg/FI.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Finnish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="396,434 tokens 397,014 words 397,279 nodes 36,981 sentences">397K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction grammar-examples legal medical news poetry social web wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Uralic, Finnic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Finnish treebanks</h3>
 
     <!-- start of Finnish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Finnish / TDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="201,949 tokens 202,193 words 202,454 nodes 15,136 sentences">202K</span></span>
@@ -4341,8 +3946,8 @@ <h3>Finnish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog fiction grammar-examples legal news wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.770301"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Finnish-TDT is based on the Turku Dependency Treebank (TDT), a broad-coverage dependency treebank of general Finnish covering numerous genres. The conversion to UD was followed by extensive manual checks and corrections, and the treebank closely adheres to the UD guidelines.
 
@@ -4354,12 +3959,11 @@ <h3>Finnish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Finnish / TDT entry -->
-      
-      <!-- start of Finnish / FTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">FTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="159,314 tokens 159,625 words 159,625 nodes 18,723 sentences">159K</span></span>
@@ -4368,8 +3972,8 @@ <h3>Finnish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.695778"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         FinnTreeBank 1 consists of manually annotated grammatical examples
 from VISK. The UD version of FinnTreeBank 1 was converted from a
@@ -4383,12 +3987,11 @@ <h3>Finnish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Finnish / FTB entry -->
-      
-      <!-- start of Finnish / OOD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">OOD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,364 tokens 19,383 words 19,383 nodes 2,122 sentences">19K</span></span>
@@ -4397,8 +4000,8 @@ <h3>Finnish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="medical poetry social web"><i class="fa fa-eyedropper"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.625175"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Finnish-OOD is an external out-of-domain test set for Finnish-TDT annotated natively into UD scheme.
 
@@ -4410,12 +4013,11 @@ <h3>Finnish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Finnish / OOD entry -->
-      
-      <!-- start of Finnish / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="15,807 tokens 15,813 words 15,817 nodes 1,000 sentences">15K</span></span>
@@ -4424,8 +4026,8 @@ <h3>Finnish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.595909"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -4439,11 +4041,10 @@ <h3>Finnish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Finnish / PUD entry -->
-      
-    </div> <!-- end of Finnish treebank list -->
+    </details>
+    
+    <!-- end of Finnish treebank list -->
 
     
     See <a href="treebanks/fi-comparison.html">here</a> for comparative statistics of Finnish treebanks.
@@ -4455,35 +4056,29 @@ <h3> Language documentation </h3>
     See the <a href="fi/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Finnish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Finnish accordion row -->
 
   <!-- start of French accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" /></span>
-    <span class="doublewidespan">French</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="9 treebanks">9</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="691,215 tokens 708,727 words 708,727 nodes 32,000 sentences">708K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog grammar-examples legal medical news nonfiction reviews spoken wiki"><i class="fa fa-calendar"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of French accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-fr">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">French</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="9 treebanks">9</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="691,215 tokens 708,727 words 708,727 nodes 32,000 sentences">708K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog grammar-examples legal medical news nonfiction reviews spoken wiki"><i class="fa fa-calendar"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of French accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>French treebanks</h3>
 
     <!-- start of French treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of French / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="389,363 tokens 400,385 words 400,385 nodes 16,342 sentences">400K</span></span>
@@ -4492,8 +4087,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news reviews wiki"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.717180"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The **UD_French-GSD** was converted in 2015 from the content head version of the universal
 dependency treebank v2.0 (https://github.com/ryanmcd/uni-dep-tb).
@@ -4507,12 +4102,11 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / GSD entry -->
-      
-      <!-- start of French / ALTS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ALTS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="66,817 tokens 68,088 words 68,088 nodes 2,026 sentences">68K</span></span>
@@ -4521,8 +4115,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.688926"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ALTS (AUTOMATED Sixteenth-century corpus) is a treebank of sixteenth-century legal French from Normandy and the Channel Islands.
 
@@ -4534,12 +4128,11 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / ALTS entry -->
-      
-      <!-- start of French / Sequoia entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Sequoia</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="68,593 tokens 70,545 words 70,545 nodes 3,099 sentences">70K</span></span>
@@ -4548,8 +4141,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="medical news nonfiction wiki"><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="LGPL-LR"><img class="license" src="logos/gpl.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.643244"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         **UD_French-Sequoia** is an automatic conversion of the [SUD_French-Sequoia](https://github.com/surfacesyntacticud/SUD_French-Sequoia) treebank, which comes from the former corpus [French Sequoia corpus](http://deep-sequoia.inria.fr).
 
@@ -4561,12 +4154,11 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / Sequoia entry -->
-      
-      <!-- start of French / ParisStories entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ParisStories</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="42,257 tokens 42,789 words 42,789 nodes 2,776 sentences">42K</span></span>
@@ -4575,8 +4167,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.617134"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Paris Stories is a corpus of oral French collected and transcribed by Linguistics students from Sorbonne Nouvelle and corrected by students from the Plurital Master&#39;s Degree of Computational Linguistics ( Inalco, Paris Nanterre, Sorbonne Nouvelle) between 2017 and 2021.
 It contains monologues and dialogues from speakers living in the Parisian region.
@@ -4589,12 +4181,11 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / ParisStories entry -->
-      
-      <!-- start of French / Rhapsodie entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Rhapsodie</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="43,691 tokens 44,234 words 44,234 nodes 3,209 sentences">44K</span></span>
@@ -4603,8 +4194,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.596887"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for spoken French.
 
@@ -4616,12 +4207,11 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / Rhapsodie entry -->
-      
-      <!-- start of French / ParTUT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ParTUT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="27,637 tokens 28,580 words 28,580 nodes 1,020 sentences">28K</span></span>
@@ -4630,8 +4220,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal news wiki"><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.571813"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_French-ParTUT is a conversion of a multilingual parallel treebank developed at the University of Turin,
 and consisting of a variety of text genres, including talks, legal texts and Wikipedia articles, among others.
@@ -4644,12 +4234,11 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / ParTUT entry -->
-      
-      <!-- start of French / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="24,131 tokens 24,726 words 24,726 nodes 1,000 sentences">24K</span></span>
@@ -4658,8 +4247,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.567236"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -4673,12 +4262,11 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / PUD entry -->
-      
-      <!-- start of French / FQB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">FQB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="23,344 tokens 23,896 words 23,896 nodes 2,289 sentences">23K</span></span>
@@ -4687,8 +4275,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="LGPL-LR"><img class="license" src="logos/gpl.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.541204"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The corpus **UD_French-FQB** is an automatic conversion of the [French QuestionBank v1](http://alpage.inria.fr/Treebanks/FQB/), a corpus entirely made of questions.
 
@@ -4700,12 +4288,11 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / FQB entry -->
-      
-      <!-- start of French / PoitevinDIVITAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PoitevinDIVITAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,382 tokens 5,484 words 5,484 nodes 239 sentences">5K</span></span>
@@ -4714,8 +4301,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004397"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_French-PoitevinDIVITAL is a manually corrected treebank of Poitevin-Saintongeais consisting of sentences from several genres.
 
@@ -4727,11 +4314,10 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / PoitevinDIVITAL entry -->
-      
-    </div> <!-- end of French treebank list -->
+    </details>
+    
+    <!-- end of French treebank list -->
 
     
     See <a href="treebanks/fr-comparison.html">here</a> for comparative statistics of French treebanks.
@@ -4743,35 +4329,29 @@ <h3> Language documentation </h3>
     See the <a href="fr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of French accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of French accordion row -->
 
   <!-- start of Frisian Dutch accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NL-FR.svg" /></span>
-    <span class="doublewidespan">Frisian Dutch</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,729 tokens 3,729 words 3,729 nodes 400 sentences">3K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Code switching</span>
-  </div>
-  <!-- end of Frisian Dutch accordion row -->
-
-  <!-- start of Frisian Dutch accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-qfn">
+      <span class="flagspan"><img class="flag" src="flags/svg/NL-FR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Frisian Dutch</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,729 tokens 3,729 words 3,729 nodes 400 sentences">3K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Code switching</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Frisian Dutch treebanks</h3>
 
     <!-- start of Frisian Dutch treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Frisian Dutch / Fame entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-qfn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Fame</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,729 tokens 3,729 words 3,729 nodes 400 sentences">3K</span></span>
@@ -4780,8 +4360,8 @@ <h3>Frisian Dutch treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.276311"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Frisian_Dutch-Fame is a selection of 400 sentences from the FAME! speech corpus by Yilmaz et al. (2016a, 2016b). The treebank is manually annotated using the UD scheme.
 
@@ -4793,11 +4373,10 @@ <h3>Frisian Dutch treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Frisian Dutch / Fame entry -->
-      
-    </div> <!-- end of Frisian Dutch treebank list -->
+    </details>
+    
+    <!-- end of Frisian Dutch treebank list -->
 
     
 
@@ -4807,35 +4386,29 @@ <h3> Language documentation </h3>
     See the <a href="qfn/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Frisian Dutch accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Frisian Dutch accordion row -->
 
   <!-- start of Galician accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ES-GA.svg" /></span>
-    <span class="doublewidespan">Galician</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="171,322 tokens 188,180 words 188,180 nodes 5,993 sentences">188K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal medical news nonfiction wiki"><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Galician accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gl">
+      <span class="flagspan"><img class="flag" src="flags/svg/ES-GA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Galician</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="171,322 tokens 188,180 words 188,180 nodes 5,993 sentences">188K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal medical news nonfiction wiki"><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Galician accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Galician treebanks</h3>
 
     <!-- start of Galician treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Galician / TreeGal entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TreeGal</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="23,479 tokens 25,548 words 25,548 nodes 1,000 sentences">25K</span></span>
@@ -4844,8 +4417,8 @@ <h3>Galician treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="LGPL-LR"><img class="license" src="logos/gpl.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.644336"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Galician-TreeGal is a treebank for Galician developed at LyS Group (Universidade da Coruña) and at CiTIUS (Universidade de Santiago de Compostela).
 
@@ -4857,12 +4430,11 @@ <h3>Galician treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Galician / TreeGal entry -->
-      
-      <!-- start of Galician / CTG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CTG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="126,011 tokens 139,122 words 139,122 nodes 3,993 sentences">139K</span></span>
@@ -4871,8 +4443,8 @@ <h3>Galician treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal medical news nonfiction"><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006314"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Galician UD treebank is based on the automatic parsing of the Galician Technical Corpus (http://sli.uvigo.gal/CTG) created at the University of Vigo by the the TALG NLP research group.
 
@@ -4884,12 +4456,11 @@ <h3>Galician treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Galician / CTG entry -->
-      
-      <!-- start of Galician / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="21,832 tokens 23,510 words 23,510 nodes 1,000 sentences">23K</span></span>
@@ -4898,8 +4469,8 @@ <h3>Galician treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005646"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Galician PUD is a treebank for Galician developed at CiTIUS (Universidade de Santiago de Compostela). It follows the annotation guidelines of [Galician-TreeGal](https://github.com/UniversalDependencies/UD_Galician-TreeGal).
 
@@ -4911,11 +4482,10 @@ <h3>Galician treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Galician / PUD entry -->
-      
-    </div> <!-- end of Galician treebank list -->
+    </details>
+    
+    <!-- end of Galician treebank list -->
 
     
     See <a href="treebanks/gl-comparison.html">here</a> for comparative statistics of Galician treebanks.
@@ -4927,35 +4497,29 @@ <h3> Language documentation </h3>
     See the <a href="gl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Galician accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Galician accordion row -->
 
   <!-- start of Georgian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" /></span>
-    <span class="doublewidespan">Georgian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="79,599 tokens 83,607 words 83,607 nodes 5,042 sentences">83K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Kartvelian</span>
-  </div>
-  <!-- end of Georgian accordion row -->
-
-  <!-- start of Georgian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ka">
+      <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Georgian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="79,599 tokens 83,607 words 83,607 nodes 5,042 sentences">83K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Kartvelian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Georgian treebanks</h3>
 
     <!-- start of Georgian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Georgian / GNC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ka">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GNC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="23,425 tokens 23,425 words 23,425 nodes 1,878 sentences">23K</span></span>
@@ -4964,8 +4528,8 @@ <h3>Georgian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.574368"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Georgian-GNC is a treebank based on texts from the Georgian National Corpus, [GNC](https://clarino.uib.no/gnc).
 
@@ -4977,12 +4541,11 @@ <h3>Georgian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Georgian / GNC entry -->
-      
-      <!-- start of Georgian / GLC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ka">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GLC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="56,174 tokens 60,182 words 60,182 nodes 3,164 sentences">60K</span></span>
@@ -4991,8 +4554,8 @@ <h3>Georgian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.412240"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Georgian UD Treebank (UD_Georgian-GLC) is the first syntactically annotated corpus of Georgian, based on a collection of annotated sentences selected from the Georgian Language Corpus (GLC) available at http://corpora.iliauni.edu.ge/ and sentences selected from Wiki in accordance with the 132 scientific fields.
 
@@ -5004,11 +4567,10 @@ <h3>Georgian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Georgian / GLC entry -->
-      
-    </div> <!-- end of Georgian treebank list -->
+    </details>
+    
+    <!-- end of Georgian treebank list -->
 
     
     See <a href="treebanks/ka-comparison.html">here</a> for comparative statistics of Georgian treebanks.
@@ -5020,35 +4582,29 @@ <h3> Language documentation </h3>
     See the <a href="ka/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Georgian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Georgian accordion row -->
 
   <!-- start of German accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/DE.svg" /></span>
-    <span class="doublewidespan">German</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,748,439 tokens 3,810,118 words 3,810,118 nodes 208,437 sentences">3,810K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction reviews web wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of German accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-de">
+      <span class="flagspan"><img class="flag" src="flags/svg/DE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">German</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,748,439 tokens 3,810,118 words 3,810,118 nodes 208,437 sentences">3,810K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction reviews web wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of German accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>German treebanks</h3>
 
     <!-- start of German treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of German / HDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-de">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,399,390 tokens 3,455,580 words 3,455,580 nodes 189,928 sentences">3,455K</span></span>
@@ -5057,8 +4613,8 @@ <h3>German treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.813590"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD German-HDT is a conversion of the Hamburg Dependency Treebank, created at the University of Hamburg through manual annotation in conjunction with a standard for morphologically and syntactically annotating sentences as well as a constraint-based parser.
 
@@ -5070,12 +4626,11 @@ <h3>German treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of German / HDT entry -->
-      
-      <!-- start of German / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-de">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="287,708 tokens 292,756 words 292,756 nodes 15,589 sentences">292K</span></span>
@@ -5084,8 +4639,8 @@ <h3>German treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news reviews wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.656559"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The German UD is converted from the content head version of the [universal
 dependency treebank v2.0 (legacy)](https://github.com/ryanmcd/uni-dep-tb).
@@ -5098,12 +4653,11 @@ <h3>German treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of German / GSD entry -->
-      
-      <!-- start of German / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-de">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="21,001 tokens 21,332 words 21,332 nodes 1,000 sentences">21K</span></span>
@@ -5112,8 +4666,8 @@ <h3>German treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005621"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -5127,12 +4681,11 @@ <h3>German treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of German / PUD entry -->
-      
-      <!-- start of German / LIT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-de">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LIT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="40,340 tokens 40,450 words 40,450 nodes 1,920 sentences">40K</span></span>
@@ -5141,8 +4694,8 @@ <h3>German treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004858"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank aims at gathering texts of the German literary history. Currently, it hosts Fragments of the early Romanticism, i.e. aphorism-like texts mainly dealing with philosophical issues concerning art, beauty and related topics.
 
@@ -5154,11 +4707,10 @@ <h3>German treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of German / LIT entry -->
-      
-    </div> <!-- end of German treebank list -->
+    </details>
+    
+    <!-- end of German treebank list -->
 
     
     See <a href="treebanks/de-comparison.html">here</a> for comparative statistics of German treebanks.
@@ -5170,35 +4722,29 @@ <h3> Language documentation </h3>
     See the <a href="de/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of German accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of German accordion row -->
 
   <!-- start of Gheg accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AL.svg" /></span>
-    <span class="doublewidespan">Gheg</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="15,990 tokens 15,990 words 15,990 nodes 966 sentences">15K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Albanian</span>
-  </div>
-  <!-- end of Gheg accordion row -->
-
-  <!-- start of Gheg accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-aln">
+      <span class="flagspan"><img class="flag" src="flags/svg/AL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Gheg</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="15,990 tokens 15,990 words 15,990 nodes 966 sentences">15K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Albanian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Gheg treebanks</h3>
 
     <!-- start of Gheg treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Gheg / GPS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-aln">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GPS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="15,990 tokens 15,990 words 15,990 nodes 966 sentences">15K</span></span>
@@ -5207,8 +4753,8 @@ <h3>Gheg treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005993"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Gheg Pear Stories (GPS) contains renarrations of Wallace Chafe&#39;s Pear Stories video (pearstories.org) by heritage speakers of Gheg Albanian living in Switzerland and speakers from Prishtina.
 
@@ -5220,11 +4766,10 @@ <h3>Gheg treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Gheg / GPS entry -->
-      
-    </div> <!-- end of Gheg treebank list -->
+    </details>
+    
+    <!-- end of Gheg treebank list -->
 
     
 
@@ -5234,35 +4779,29 @@ <h3> Language documentation </h3>
     See the <a href="aln/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Gheg accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Gheg accordion row -->
 
   <!-- start of Gorontalo accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ID.svg" /></span>
-    <span class="doublewidespan">Gorontalo</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="205 tokens 205 words 205 nodes 39 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
-  </div>
-  <!-- end of Gorontalo accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gor">
+      <span class="flagspan"><img class="flag" src="flags/svg/ID.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Gorontalo</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="205 tokens 205 words 205 nodes 39 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Gorontalo accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Gorontalo treebanks</h3>
 
     <!-- start of Gorontalo treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Gorontalo / BungoLoLombi entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gor">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BungoLoLombi</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="205 tokens 205 words 205 nodes 39 sentences">&lt;1K</span></span>
@@ -5271,8 +4810,8 @@ <h3>Gorontalo treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.296527"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Bungo lo Lombi is a Universal Dependencies parsed corpus of modern spoken Gorontalo as spoken in Gorontalo City, Gorontalo Province, Indonesia. It comprises fieldwork samples obtained by Colleen Alena O&#39;Brien.
 
@@ -5284,11 +4823,10 @@ <h3>Gorontalo treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Gorontalo / BungoLoLombi entry -->
-      
-    </div> <!-- end of Gorontalo treebank list -->
+    </details>
+    
+    <!-- end of Gorontalo treebank list -->
 
     
 
@@ -5298,35 +4836,29 @@ <h3> Language documentation </h3>
     See the <a href="gor/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Gorontalo accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Gorontalo accordion row -->
 
   <!-- start of Gothic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BYZ.svg" /></span>
-    <span class="doublewidespan">Gothic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="55,336 tokens 55,336 words 55,336 nodes 5,401 sentences">55K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Gothic accordion row -->
-
-  <!-- start of Gothic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-got">
+      <span class="flagspan"><img class="flag" src="flags/svg/BYZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Gothic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="55,336 tokens 55,336 words 55,336 nodes 5,401 sentences">55K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Gothic treebanks</h3>
 
     <!-- start of Gothic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Gothic / PROIEL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-got">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PROIEL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="55,336 tokens 55,336 words 55,336 nodes 5,401 sentences">55K</span></span>
@@ -5335,8 +4867,8 @@ <h3>Gothic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006032"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Gothic treebank is based on the Gothic data from the PROIEL treebank, and consists of Wulfila&#39;s Bible translation.
 
@@ -5348,11 +4880,10 @@ <h3>Gothic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Gothic / PROIEL entry -->
-      
-    </div> <!-- end of Gothic treebank list -->
+    </details>
+    
+    <!-- end of Gothic treebank list -->
 
     
 
@@ -5362,35 +4893,29 @@ <h3> Language documentation </h3>
     See the <a href="got/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Gothic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Gothic accordion row -->
 
   <!-- start of Greek accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GR.svg" /></span>
-    <span class="doublewidespan">Greek</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="108,148 tokens 110,892 words 110,892 nodes 6,004 sentences">110K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples learner-essays news spoken wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Greek</span>
-  </div>
-  <!-- end of Greek accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-el">
+      <span class="flagspan"><img class="flag" src="flags/svg/GR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Greek</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="108,148 tokens 110,892 words 110,892 nodes 6,004 sentences">110K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples learner-essays news spoken wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Greek</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Greek accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Greek treebanks</h3>
 
     <!-- start of Greek treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Greek / GDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-el">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="61,773 tokens 63,441 words 63,441 nodes 2,521 sentences">63K</span></span>
@@ -5399,8 +4924,8 @@ <h3>Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news spoken wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.685254"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Greek UD treebank (UD_Greek-GDT) is derived from the Greek Dependency Treebank
 (https://gdt.ilsp.gr), a resource developed and maintained by
@@ -5415,12 +4940,11 @@ <h3>Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Greek / GDT entry -->
-      
-      <!-- start of Greek / GUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-el">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="24,897 tokens 25,493 words 25,493 nodes 1,807 sentences">25K</span></span>
@@ -5429,8 +4953,8 @@ <h3>Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.658864"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         GUD is a resource for EL manually annotated for morphology and syntax. It is an ongoing project led by Stella Markantonatou and Vivian Stamou (hereinafter: the GUD team), both researchers at the [Institute for Language and Speech Processing](http://www.ilsp.gr/) (ILSP/Athena Research Centre).
 
@@ -5442,12 +4966,11 @@ <h3>Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Greek / GUD entry -->
-      
-      <!-- start of Greek / Lesbian entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-el">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Lesbian</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,624 tokens 6,840 words 6,840 nodes 625 sentences">6K</span></span>
@@ -5456,8 +4979,8 @@ <h3>Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.551252"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies (UD) treebank for the dialect of Lesbos, a low-resource living Northern variety of Modern Greek. The treebank currently contains 625 sentences with manual annotations following the Universal Dependencies framework, representing the first UD treebank for a Northern Modern Greek dialect.
 
@@ -5469,12 +4992,11 @@ <h3>Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Greek / Lesbian entry -->
-      
-      <!-- start of Greek / GLCII entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-el">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GLCII</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="9,604 tokens 9,868 words 9,868 nodes 671 sentences">9K</span></span>
@@ -5483,8 +5005,8 @@ <h3>Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.499999"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A treebank based on version 2 of the Greek Learner Corpus (GLCII), consisting of written data produced by learners of Modern Greek.
 
@@ -5496,12 +5018,11 @@ <h3>Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Greek / GLCII entry -->
-      
-      <!-- start of Greek / Messinian entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-el">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Messinian</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="899 tokens 899 words 899 nodes 110 sentences">&lt;1K</span></span>
@@ -5510,8 +5031,8 @@ <h3>Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.429807"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Messenian is in the Southern group of dialects of Modern Greek to which also belongs the main variety (the Standard).
 
@@ -5523,12 +5044,11 @@ <h3>Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Greek / Messinian entry -->
-      
-      <!-- start of Greek / Cretan entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-el">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Cretan</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4,351 tokens 4,351 words 4,351 nodes 270 sentences">4K</span></span>
@@ -5537,8 +5057,8 @@ <h3>Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005021"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The text of the treebank was transcribed with Wisper (trained on Cretan) from 9 tapes containing  folklore narratives by one speaker, Ioannis Anagnostakis, who is responsible for their composition. The narratives are radio broadcasts in digital format, with permission from the Audiovisual Department of the Vikelaia Municipal Library of Heraklion, Crete (1998-2001).
 The data were split into  training (70%),  dev (10%) and  test (20%) sets.
@@ -5551,11 +5071,10 @@ <h3>Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Greek / Cretan entry -->
-      
-    </div> <!-- end of Greek treebank list -->
+    </details>
+    
+    <!-- end of Greek treebank list -->
 
     
     See <a href="treebanks/el-comparison.html">here</a> for comparative statistics of Greek treebanks.
@@ -5567,35 +5086,29 @@ <h3> Language documentation </h3>
     See the <a href="el/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Greek accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Greek accordion row -->
 
   <!-- start of Guajajara accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Guajajara</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="8,870 tokens 9,160 words 9,160 nodes 1,182 sentences">9K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Tupian, Maweti-Guarani</span>
-  </div>
-  <!-- end of Guajajara accordion row -->
-
-  <!-- start of Guajajara accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gub">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Guajajara</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="8,870 tokens 9,160 words 9,160 nodes 1,182 sentences">9K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Tupian, Maweti-Guarani</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Guajajara treebanks</h3>
 
     <!-- start of Guajajara treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Guajajara / TuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gub">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="8,870 tokens 9,160 words 9,160 nodes 1,182 sentences">9K</span></span>
@@ -5604,8 +5117,8 @@ <h3>Guajajara treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004553"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Guajajara-TuDeT is a collection of annotated sentences in &lt;a href=&#34;https://glottolog.org/resource/languoid/id/guaj1255&#34;&gt;Guajajara&lt;/a&gt;. Sentences stem from multiple sources such as descriptions of the language, short stories, dictionaries and translations from the New Testament. Sentence annotation and documentation by Lorena Martín Rodríguez and Fabrício Ferraz Gerardi.
 
@@ -5617,11 +5130,10 @@ <h3>Guajajara treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Guajajara / TuDeT entry -->
-      
-    </div> <!-- end of Guajajara treebank list -->
+    </details>
+    
+    <!-- end of Guajajara treebank list -->
 
     
 
@@ -5631,35 +5143,29 @@ <h3> Language documentation </h3>
     See the <a href="gub/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Guajajara accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Guajajara accordion row -->
 
   <!-- start of Guarani accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PY.svg" /></span>
-    <span class="doublewidespan">Guarani</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="212 tokens 217 words 217 nodes 59 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Tupian, Maweti-Guarani</span>
-  </div>
-  <!-- end of Guarani accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gn">
+      <span class="flagspan"><img class="flag" src="flags/svg/PY.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Guarani</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="212 tokens 217 words 217 nodes 59 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Tupian, Maweti-Guarani</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Guarani accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Guarani treebanks</h3>
 
     <!-- start of Guarani treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Guarani / OldTuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">OldTuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="212 tokens 217 words 217 nodes 59 sentences">&lt;1K</span></span>
@@ -5668,8 +5174,8 @@ <h3>Guarani treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002451"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Guarani-OldTuDeT is a collection of annotated texts in &lt;a href=&#34;https://glottolog.org/resource/languoid/id/oldp1258&#34;&gt;Old Guaraní&lt;/a&gt;. All known sources in this language are being annotated: cathesisms, grammars (seventeenth and eighteenth century), sentences from dictionaries, and other texts. Sentence annotation and documentation by Fabrício Ferraz Gerardi and Lorena Martín Rodríguez.
 
@@ -5681,11 +5187,10 @@ <h3>Guarani treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Guarani / OldTuDeT entry -->
-      
-    </div> <!-- end of Guarani treebank list -->
+    </details>
+    
+    <!-- end of Guarani treebank list -->
 
     
 
@@ -5695,35 +5200,29 @@ <h3> Language documentation </h3>
     See the <a href="gn/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Guarani accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Guarani accordion row -->
 
   <!-- start of Gujarati accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Gujarati</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,801 tokens 1,885 words 1,885 nodes 187 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Gujarati accordion row -->
-
-  <!-- start of Gujarati accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gu">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Gujarati</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,801 tokens 1,885 words 1,885 nodes 187 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Gujarati treebanks</h3>
 
     <!-- start of Gujarati treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Gujarati / GujTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gu">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GujTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,801 tokens 1,885 words 1,885 nodes 187 sentences">1K</span></span>
@@ -5732,8 +5231,8 @@ <h3>Gujarati treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.265557"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         GujTB is an in-progress treebank of Gujarati (an Indo-Aryan language) in Gujarati script.
 
@@ -5745,11 +5244,10 @@ <h3>Gujarati treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Gujarati / GujTB entry -->
-      
-    </div> <!-- end of Gujarati treebank list -->
+    </details>
+    
+    <!-- end of Gujarati treebank list -->
 
     
 
@@ -5759,35 +5257,29 @@ <h3> Language documentation </h3>
     See the <a href="gu/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Gujarati accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Gujarati accordion row -->
 
   <!-- start of Gwichin accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/US-AK.svg" /></span>
-    <span class="doublewidespan">Gwichin</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,008 tokens 1,008 words 1,008 nodes 313 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Na-Dene</span>
-  </div>
-  <!-- end of Gwichin accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gwi">
+      <span class="flagspan"><img class="flag" src="flags/svg/US-AK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Gwichin</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,008 tokens 1,008 words 1,008 nodes 313 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Na-Dene</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Gwichin accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Gwichin treebanks</h3>
 
     <!-- start of Gwichin treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Gwichin / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gwi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,008 tokens 1,008 words 1,008 nodes 313 sentences">1K</span></span>
@@ -5796,8 +5288,8 @@ <h3>Gwichin treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.185680"><img src="/img/stars10.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Gwichin-TueCL is a small treebank of Alaskan Gwich&#39;in, an endangered Athabascan language, based on material located in the Alaska Native Language Archive.
 
@@ -5809,11 +5301,10 @@ <h3>Gwichin treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Gwichin / TueCL entry -->
-      
-    </div> <!-- end of Gwichin treebank list -->
+    </details>
+    
+    <!-- end of Gwichin treebank list -->
 
     
 
@@ -5823,35 +5314,29 @@ <h3> Language documentation </h3>
     See the <a href="gwi/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Gwichin accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Gwichin accordion row -->
 
   <!-- start of Haitian Creole accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/HT.svg" /></span>
-    <span class="doublewidespan">Haitian Creole</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="75,013 tokens 75,013 words 75,013 nodes 3,458 sentences">75K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Creole</span>
-  </div>
-  <!-- end of Haitian Creole accordion row -->
-
-  <!-- start of Haitian Creole accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ht">
+      <span class="flagspan"><img class="flag" src="flags/svg/HT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Haitian Creole</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="75,013 tokens 75,013 words 75,013 nodes 3,458 sentences">75K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Creole</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Haitian Creole treebanks</h3>
 
     <!-- start of Haitian Creole treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Haitian Creole / Autogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ht">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Autogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,279 tokens 3,279 words 3,279 nodes 144 sentences">3K</span></span>
@@ -5860,8 +5345,8 @@ <h3>Haitian Creole treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.394079"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a treebank of Haitian creole. It contains 144 sentences selected from 3 major genres: bible, literary texts, newspapers.
 
@@ -5875,12 +5360,11 @@ <h3>Haitian Creole treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Haitian Creole / Autogramm entry -->
-      
-      <!-- start of Haitian Creole / Adolphe entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ht">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Adolphe</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="71,734 tokens 71,734 words 71,734 nodes 3,314 sentences">71K</span></span>
@@ -5889,8 +5373,8 @@ <h3>Haitian Creole treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005987"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a treebank for Haitian creole. It contains 3314 sentences and 300,000+ words selected from 1 bible-related source and was annotated programmatically.
 
@@ -5904,11 +5388,10 @@ <h3>Haitian Creole treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Haitian Creole / Adolphe entry -->
-      
-    </div> <!-- end of Haitian Creole treebank list -->
+    </details>
+    
+    <!-- end of Haitian Creole treebank list -->
 
     
     See <a href="treebanks/ht-comparison.html">here</a> for comparative statistics of Haitian Creole treebanks.
@@ -5920,35 +5403,29 @@ <h3> Language documentation </h3>
     See the <a href="ht/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Haitian Creole accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Haitian Creole accordion row -->
 
   <!-- start of Hausa accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NG.svg" /></span>
-    <span class="doublewidespan">Hausa</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="53,069 tokens 53,210 words 53,210 nodes 4,342 sentences">53K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, West Chadic</span>
-  </div>
-  <!-- end of Hausa accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ha">
+      <span class="flagspan"><img class="flag" src="flags/svg/NG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Hausa</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="53,069 tokens 53,210 words 53,210 nodes 4,342 sentences">53K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, West Chadic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Hausa accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Hausa treebanks</h3>
 
     <!-- start of Hausa treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Hausa / EasternAutogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ha">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">EasternAutogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="9,485 tokens 9,485 words 9,485 nodes 335 sentences">9K</span></span>
@@ -5957,8 +5434,8 @@ <h3>Hausa treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.550429"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank contains data of the Autogramm project, for the (Kano) Eastern dialect of Hausa, Nigeria.
 
@@ -5970,12 +5447,11 @@ <h3>Hausa treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hausa / EasternAutogramm entry -->
-      
-      <!-- start of Hausa / WesternAutogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ha">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">WesternAutogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="13,862 tokens 13,903 words 13,903 nodes 775 sentences">13K</span></span>
@@ -5984,8 +5460,8 @@ <h3>Hausa treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.545993"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank contains data of Southern Autogramm, for the (Tibiri) Gobir dialect of Niger Republic (Western Hausa).
 
@@ -5997,12 +5473,11 @@ <h3>Hausa treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hausa / WesternAutogramm entry -->
-      
-      <!-- start of Hausa / NorthernAutogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ha">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">NorthernAutogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="15,324 tokens 15,424 words 15,424 nodes 1,305 sentences">15K</span></span>
@@ -6011,8 +5486,8 @@ <h3>Hausa treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.542384"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank contains data of Northern Autogramm, for the Ader dialect of Niger Republic (Northern Hausa).
 
@@ -6024,12 +5499,11 @@ <h3>Hausa treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hausa / NorthernAutogramm entry -->
-      
-      <!-- start of Hausa / SouthernAutogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ha">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SouthernAutogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="14,398 tokens 14,398 words 14,398 nodes 1,927 sentences">14K</span></span>
@@ -6038,8 +5512,8 @@ <h3>Hausa treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.541696"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank contains data of Southern Autogramm, for the Zaria dialect of Nigeria (Southern Hausa).
 
@@ -6051,11 +5525,10 @@ <h3>Hausa treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hausa / SouthernAutogramm entry -->
-      
-    </div> <!-- end of Hausa treebank list -->
+    </details>
+    
+    <!-- end of Hausa treebank list -->
 
     
     See <a href="treebanks/ha-comparison.html">here</a> for comparative statistics of Hausa treebanks.
@@ -6067,35 +5540,29 @@ <h3> Language documentation </h3>
     See the <a href="ha/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Hausa accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Hausa accordion row -->
 
   <!-- start of Hebrew accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IL.svg" /></span>
-    <span class="doublewidespan">Hebrew</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="273,830 tokens 376,192 words 376,192 nodes 14,361 sentences">376K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible government legal news poetry spoken wiki"><i class="fa fa-cloud"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-music"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Hebrew accordion row -->
-
-  <!-- start of Hebrew accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-he">
+      <span class="flagspan"><img class="flag" src="flags/svg/IL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Hebrew</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="273,830 tokens 376,192 words 376,192 nodes 14,361 sentences">376K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible government legal news poetry spoken wiki"><i class="fa fa-cloud"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-music"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Hebrew treebanks</h3>
 
     <!-- start of Hebrew treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Hebrew / IAHLTwiki entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-he">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IAHLTwiki</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="103,395 tokens 140,961 words 140,961 nodes 5,039 sentences">140K</span></span>
@@ -6104,8 +5571,8 @@ <h3>Hebrew treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.753026"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Publicly available subset of the IAHLT UD Hebrew Treebank&#39;s Wikipedia section (https://www.iahlt.org/)
 
@@ -6117,12 +5584,11 @@ <h3>Hebrew treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hebrew / IAHLTwiki entry -->
-      
-      <!-- start of Hebrew / IAHLTknesset entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-he">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IAHLTknesset</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="50,499 tokens 67,007 words 67,007 nodes 2,883 sentences">67K</span></span>
@@ -6131,8 +5597,8 @@ <h3>Hebrew treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="government spoken"><i class="fa fa-fort-awesome"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.694880"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Publicly available IAHLT UD Hebrew Treebank&#39;s Knesset section (https://www.iahlt.org/)
 
@@ -6144,12 +5610,11 @@ <h3>Hebrew treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hebrew / IAHLTknesset entry -->
-      
-      <!-- start of Hebrew / HTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-he">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="114,648 tokens 160,195 words 160,195 nodes 6,143 sentences">160K</span></span>
@@ -6158,8 +5623,8 @@ <h3>Hebrew treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.678305"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies Corpus for Hebrew.
 
@@ -6171,12 +5636,11 @@ <h3>Hebrew treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hebrew / HTB entry -->
-      
-      <!-- start of Hebrew / PostRab entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-he">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PostRab</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,288 tokens 8,029 words 8,029 nodes 296 sentences">8K</span></span>
@@ -6185,8 +5649,8 @@ <h3>Hebrew treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible legal poetry"><i class="fa fa-cloud"></i><i class="fa fa-legal"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.472670"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies treebank of post-Rabbinic historical Hebrew, comprising ~300 (~8000 tokens) sentences annotated for morphology and syntax from diverse pre-modern sources.
 
@@ -6198,11 +5662,10 @@ <h3>Hebrew treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hebrew / PostRab entry -->
-      
-    </div> <!-- end of Hebrew treebank list -->
+    </details>
+    
+    <!-- end of Hebrew treebank list -->
 
     
     See <a href="treebanks/he-comparison.html">here</a> for comparative statistics of Hebrew treebanks.
@@ -6214,35 +5677,29 @@ <h3> Language documentation </h3>
     See the <a href="he/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Hebrew accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Hebrew accordion row -->
 
   <!-- start of Highland Puebla Nahuatl accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" /></span>
-    <span class="doublewidespan">Highland P. Nahuatl</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="10,018 tokens 10,088 words 10,103 nodes 1,260 sentences">10K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples nonfiction spoken"><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Uto-Aztecan</span>
-  </div>
-  <!-- end of Highland Puebla Nahuatl accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-azz">
+      <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Highland P. Nahuatl</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="10,018 tokens 10,088 words 10,103 nodes 1,260 sentences">10K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples nonfiction spoken"><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Uto-Aztecan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Highland Puebla Nahuatl accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Highland Puebla Nahuatl treebanks</h3>
 
     <!-- start of Highland Puebla Nahuatl treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Highland Puebla Nahuatl / ITML entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-azz">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ITML</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="10,018 tokens 10,088 words 10,103 nodes 1,260 sentences">10K</span></span>
@@ -6251,8 +5708,8 @@ <h3>Highland Puebla Nahuatl treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples nonfiction spoken"><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005344"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Highland_Puebla_Nahuatl-ITML is a collection of texts in the Highland Puebla variety of Nahuatl (ISO-639: `azz`) spoken in 24 municipalities
 in the state of Mexico in Puebla. The treebank contains spoken monologue and dialogue, scientific texts translated from Spanish and some miscellaneous
@@ -6266,11 +5723,10 @@ <h3>Highland Puebla Nahuatl treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Highland Puebla Nahuatl / ITML entry -->
-      
-    </div> <!-- end of Highland Puebla Nahuatl treebank list -->
+    </details>
+    
+    <!-- end of Highland Puebla Nahuatl treebank list -->
 
     
 
@@ -6280,35 +5736,29 @@ <h3> Language documentation </h3>
     See the <a href="azz/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Highland Puebla Nahuatl accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Highland Puebla Nahuatl accordion row -->
 
   <!-- start of Hindi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Hindi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="375,533 tokens 375,533 words 375,533 nodes 17,649 sentences">375K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Hindi accordion row -->
-
-  <!-- start of Hindi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-hi">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Hindi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="375,533 tokens 375,533 words 375,533 nodes 17,649 sentences">375K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Hindi treebanks</h3>
 
     <!-- start of Hindi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Hindi / HDTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HDTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="351,704 tokens 351,704 words 351,704 nodes 16,649 sentences">351K</span></span>
@@ -6317,8 +5767,8 @@ <h3>Hindi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007161"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Hindi UD treebank is based on the Hindi Dependency Treebank (HDTB),
 created at IIIT Hyderabad, India.
@@ -6331,12 +5781,11 @@ <h3>Hindi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hindi / HDTB entry -->
-      
-      <!-- start of Hindi / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="23,829 tokens 23,829 words 23,829 nodes 1,000 sentences">23K</span></span>
@@ -6345,8 +5794,8 @@ <h3>Hindi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004942"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -6360,11 +5809,10 @@ <h3>Hindi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hindi / PUD entry -->
-      
-    </div> <!-- end of Hindi treebank list -->
+    </details>
+    
+    <!-- end of Hindi treebank list -->
 
     
     See <a href="treebanks/hi-comparison.html">here</a> for comparative statistics of Hindi treebanks.
@@ -6376,35 +5824,29 @@ <h3> Language documentation </h3>
     See the <a href="hi/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Hindi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Hindi accordion row -->
 
   <!-- start of Hittite accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" /></span>
-    <span class="doublewidespan">Hittite</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="971 tokens 1,309 words 1,309 nodes 136 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Anatolian</span>
-  </div>
-  <!-- end of Hittite accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-hit">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Hittite</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="971 tokens 1,309 words 1,309 nodes 136 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Anatolian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Hittite accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Hittite treebanks</h3>
 
     <!-- start of Hittite treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Hittite / HitTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hit">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HitTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="971 tokens 1,309 words 1,309 nodes 136 sentences">1K</span></span>
@@ -6413,8 +5855,8 @@ <h3>Hittite treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004347"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Hittite-HitTB is a small Universal Dependencies treebank for Hittite, containing original sentences from Hoffner and Melchert&#39;s tutorial to A Grammar of the Hittite Language.
 
@@ -6426,11 +5868,10 @@ <h3>Hittite treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hittite / HitTB entry -->
-      
-    </div> <!-- end of Hittite treebank list -->
+    </details>
+    
+    <!-- end of Hittite treebank list -->
 
     
 
@@ -6440,35 +5881,29 @@ <h3> Language documentation </h3>
     See the <a href="hit/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Hittite accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Hittite accordion row -->
 
   <!-- start of Hungarian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/HU.svg" /></span>
-    <span class="doublewidespan">Hungarian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="42,032 tokens 42,032 words 42,032 nodes 1,800 sentences">42K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Uralic, Ugric</span>
-  </div>
-  <!-- end of Hungarian accordion row -->
-
-  <!-- start of Hungarian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-hu">
+      <span class="flagspan"><img class="flag" src="flags/svg/HU.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Hungarian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="42,032 tokens 42,032 words 42,032 nodes 1,800 sentences">42K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Uralic, Ugric</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Hungarian treebanks</h3>
 
     <!-- start of Hungarian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Hungarian / Szeged entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hu">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Szeged</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="42,032 tokens 42,032 words 42,032 nodes 1,800 sentences">42K</span></span>
@@ -6477,8 +5912,8 @@ <h3>Hungarian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.663996"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Hungarian UD treebank is derived from the Szeged Dependency Treebank (Vincze et al. 2010).
 
@@ -6490,11 +5925,10 @@ <h3>Hungarian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hungarian / Szeged entry -->
-      
-    </div> <!-- end of Hungarian treebank list -->
+    </details>
+    
+    <!-- end of Hungarian treebank list -->
 
     
 
@@ -6504,35 +5938,29 @@ <h3> Language documentation </h3>
     See the <a href="hu/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Hungarian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Hungarian accordion row -->
 
   <!-- start of Icelandic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IS.svg" /></span>
-    <span class="doublewidespan">Icelandic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,182,501 tokens 1,183,884 words 1,183,884 nodes 53,564 sentences">1,183K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction government legal news nonfiction wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Icelandic accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-is">
+      <span class="flagspan"><img class="flag" src="flags/svg/IS.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Icelandic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,182,501 tokens 1,183,884 words 1,183,884 nodes 53,564 sentences">1,183K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction government legal news nonfiction wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Icelandic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Icelandic treebanks</h3>
 
     <!-- start of Icelandic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Icelandic / IcePaHC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-is">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IcePaHC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="983,668 tokens 985,046 words 985,046 nodes 44,029 sentences">985K</span></span>
@@ -6541,8 +5969,8 @@ <h3>Icelandic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction legal nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007622"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Icelandic-IcePaHC is a conversion of the [Icelandic Parsed Historical Corpus (IcePaHC)](https://linguist.is/icelandic_treebank/Icelandic_Parsed_Historical_Corpus_(IcePaHC)) to the Universal Dependencies scheme.
 
@@ -6556,12 +5984,11 @@ <h3>Icelandic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Icelandic / IcePaHC entry -->
-      
-      <!-- start of Icelandic / Modern entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-is">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Modern</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="80,391 tokens 80,394 words 80,394 nodes 3,535 sentences">80K</span></span>
@@ -6570,8 +5997,8 @@ <h3>Icelandic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006331"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Icelandic-Modern is a conversion of the [modern additions](https://github.com/antonkarl/icecorpus/tree/master/additions2019) to the Icelandic Parsed Historical Corpus (IcePaHC) to the Universal Dependencies scheme.
 
@@ -6583,12 +6010,11 @@ <h3>Icelandic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Icelandic / Modern entry -->
-      
-      <!-- start of Icelandic / GC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-is">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="99,611 tokens 99,611 words 99,611 nodes 5,000 sentences">99K</span></span>
@@ -6597,8 +6023,8 @@ <h3>Icelandic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="government news"><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005817"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Icelandic-GC is a conversion of the gold part of [GreynirCorpus](https://github.com/mideind/GreynirCorpus), which has been manually corrected and verified. The corpus is parsed into full constituency trees, and converted using [UDConverter-GreynirCorpus](https://github.com/thorunna/UDConverter-GreynirCorpus).
 
@@ -6610,12 +6036,11 @@ <h3>Icelandic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Icelandic / GC entry -->
-      
-      <!-- start of Icelandic / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-is">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="18,831 tokens 18,833 words 18,833 nodes 1,000 sentences">18K</span></span>
@@ -6624,8 +6049,8 @@ <h3>Icelandic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003262"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Icelandic-PUD is the Icelandic part of the Parallel Universal Dependencies (PUD) treebanks.
 
@@ -6637,11 +6062,10 @@ <h3>Icelandic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Icelandic / PUD entry -->
-      
-    </div> <!-- end of Icelandic treebank list -->
+    </details>
+    
+    <!-- end of Icelandic treebank list -->
 
     
     See <a href="treebanks/is-comparison.html">here</a> for comparative statistics of Icelandic treebanks.
@@ -6653,35 +6077,29 @@ <h3> Language documentation </h3>
     See the <a href="is/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Icelandic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Icelandic accordion row -->
 
   <!-- start of Ika accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CO.svg" /></span>
-    <span class="doublewidespan">Ika</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="5,307 tokens 5,307 words 5,307 nodes 628 sentences">5K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Chibchan, Arhuacic</span>
-  </div>
-  <!-- end of Ika accordion row -->
-
-  <!-- start of Ika accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-arh">
+      <span class="flagspan"><img class="flag" src="flags/svg/CO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Ika</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="5,307 tokens 5,307 words 5,307 nodes 628 sentences">5K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Chibchan, Arhuacic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Ika treebanks</h3>
 
     <!-- start of Ika treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Ika / ChibErgIS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-arh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ChibErgIS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,307 tokens 5,307 words 5,307 nodes 628 sentences">5K</span></span>
@@ -6690,8 +6108,8 @@ <h3>Ika treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.328514"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for Ika, a member of the Chibchan language family. The language is spoken by about 25,000 speakers in Colombia.
 
@@ -6703,11 +6121,10 @@ <h3>Ika treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ika / ChibErgIS entry -->
-      
-    </div> <!-- end of Ika treebank list -->
+    </details>
+    
+    <!-- end of Ika treebank list -->
 
     
 
@@ -6717,35 +6134,29 @@ <h3> Language documentation </h3>
     See the <a href="arh/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Ika accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Ika accordion row -->
 
   <!-- start of Indonesian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ID.svg" /></span>
-    <span class="doublewidespan">Indonesian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="166,635 tokens 169,728 words 169,728 nodes 7,628 sentences">169K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction wiki"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Austronesian, Malayo-Sumbawan</span>
-  </div>
-  <!-- end of Indonesian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-id">
+      <span class="flagspan"><img class="flag" src="flags/svg/ID.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Indonesian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="166,635 tokens 169,728 words 169,728 nodes 7,628 sentences">169K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction wiki"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Austronesian, Malayo-Sumbawan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Indonesian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Indonesian treebanks</h3>
 
     <!-- start of Indonesian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Indonesian / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-id">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,034 tokens 19,446 words 19,446 nodes 1,000 sentences">19K</span></span>
@@ -6754,8 +6165,8 @@ <h3>Indonesian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.629078"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -6769,12 +6180,11 @@ <h3>Indonesian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Indonesian / PUD entry -->
-      
-      <!-- start of Indonesian / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-id">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="119,830 tokens 122,019 words 122,019 nodes 5,598 sentences">122K</span></span>
@@ -6783,8 +6193,8 @@ <h3>Indonesian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.619229"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Indonesian-GSD treebank was originally converted from the content head version of the [universal dependency treebank v2.0 (legacy)](https://github.com/ryanmcd/uni-dep-tb) in 2015. In order to comply with the latest Indonesian annotation guidelines, the treebank has undergone a major revision between UD releases v2.8 and v2.9 (2021).
 
@@ -6796,12 +6206,11 @@ <h3>Indonesian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Indonesian / GSD entry -->
-      
-      <!-- start of Indonesian / CSUI entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-id">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CSUI</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="27,771 tokens 28,263 words 28,263 nodes 1,030 sentences">28K</span></span>
@@ -6810,8 +6219,8 @@ <h3>Indonesian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.538736"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Indonesian-CSUI is a conversion from an Indonesian constituency treebank in the Penn Treebank format named [**Kethu**](https://github.com/ialfina/kethu) that was also a conversion from a constituency treebank built by [**Dinakaramani et al. (2015)**](https://github.com/famrashel/idn-treebank). We named this treebank **Indonesian-CSUI**, since all the three versions of the treebanks were built at Faculty of Computer Science, Universitas Indonesia.
 
@@ -6823,11 +6232,10 @@ <h3>Indonesian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Indonesian / CSUI entry -->
-      
-    </div> <!-- end of Indonesian treebank list -->
+    </details>
+    
+    <!-- end of Indonesian treebank list -->
 
     
     See <a href="treebanks/id-comparison.html">here</a> for comparative statistics of Indonesian treebanks.
@@ -6839,35 +6247,29 @@ <h3> Language documentation </h3>
     See the <a href="id/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Indonesian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Indonesian accordion row -->
 
   <!-- start of Irish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IE.svg" /></span>
-    <span class="doublewidespan">Irish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="168,489 tokens 168,563 words 168,563 nodes 7,699 sentences">168K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction government legal news nonfiction poetry social web"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i></span></span>
-    <span class="triplewidespan">IE, Celtic</span>
-  </div>
-  <!-- end of Irish accordion row -->
-
-  <!-- start of Irish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ga">
+      <span class="flagspan"><img class="flag" src="flags/svg/IE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Irish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="168,489 tokens 168,563 words 168,563 nodes 7,699 sentences">168K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction government legal news nonfiction poetry social web"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i></span></span>
+      <span class="triplewidespan">IE, Celtic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Irish treebanks</h3>
 
     <!-- start of Irish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Irish / IDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ga">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="115,990 tokens 115,990 words 115,990 nodes 4,910 sentences">115K</span></span>
@@ -6876,8 +6278,8 @@ <h3>Irish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction government legal news web"><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007307"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies 4910-sentence treebank for modern Irish.
 
@@ -6889,12 +6291,11 @@ <h3>Irish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Irish / IDT entry -->
-      
-      <!-- start of Irish / TwittIrish entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ga">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TwittIrish</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="47,790 tokens 47,790 words 47,790 nodes 2,596 sentences">47K</span></span>
@@ -6903,8 +6304,8 @@ <h3>Irish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006160"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies treebank of 2596 tweets in modern Irish.
 
@@ -6916,12 +6317,11 @@ <h3>Irish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Irish / TwittIrish entry -->
-      
-      <!-- start of Irish / Cadhan entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ga">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Cadhan</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4,709 tokens 4,783 words 4,783 nodes 193 sentences">4K</span></span>
@@ -6930,8 +6330,8 @@ <h3>Irish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction poetry"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005107"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is the Cadhan Aonair UD treebank, consisting of
 150 sentences randomly sampled from six pre-standard Irish texts.
@@ -6947,11 +6347,10 @@ <h3>Irish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Irish / Cadhan entry -->
-      
-    </div> <!-- end of Irish treebank list -->
+    </details>
+    
+    <!-- end of Irish treebank list -->
 
     
     See <a href="treebanks/ga-comparison.html">here</a> for comparative statistics of Irish treebanks.
@@ -6963,35 +6362,29 @@ <h3> Language documentation </h3>
     See the <a href="ga/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Irish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Irish accordion row -->
 
   <!-- start of Italian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IT.svg" /></span>
-    <span class="doublewidespan">Italian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="11 treebanks">11</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="960,560 tokens 1,020,333 words 1,020,676 nodes 43,511 sentences">1,020K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="government grammar-examples learner-essays legal news nonfiction poetry social spoken wiki"><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Italian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-it">
+      <span class="flagspan"><img class="flag" src="flags/svg/IT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Italian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="11 treebanks">11</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="960,560 tokens 1,020,333 words 1,020,676 nodes 43,511 sentences">1,020K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="government grammar-examples learner-essays legal news nonfiction poetry social spoken wiki"><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Italian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Italian treebanks</h3>
 
     <!-- start of Italian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Italian / ISDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ISDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="278,424 tokens 298,338 words 298,375 nodes 14,167 sentences">298K</span></span>
@@ -7000,8 +6393,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal news wiki"><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.746461"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Italian corpus annotated according to the UD annotation scheme was obtained by conversion from ISDT (Italian Stanford Dependency Treebank), released for the dependency parsing shared task of Evalita-2014 (Bosco et al. 2014).
 
@@ -7013,12 +6406,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / ISDT entry -->
-      
-      <!-- start of Italian / VIT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">VIT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="259,625 tokens 280,152 words 280,152 nodes 10,087 sentences">280K</span></span>
@@ -7027,8 +6419,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.736915"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD_Italian-VIT corpus was obtained by conversion from VIT (Venice Italian Treebank), developed at the Laboratory of Computational Linguistics of the Università Ca&#39; Foscari in Venice (Delmonte et al. 2007; Delmonte 2009; http://rondelmo.it/resource/VIT/Browser-VIT/index.htm).
 
@@ -7040,12 +6432,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / VIT entry -->
-      
-      <!-- start of Italian / KIParlaForest entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KIParlaForest</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="18,050 tokens 18,680 words 18,680 nodes 2,221 sentences">18K</span></span>
@@ -7054,8 +6445,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.558659"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The KIParla Forest treebank is a treebank of spoken Italian based on the [KIParla Corpus](https://kiparla.it/)
 
@@ -7067,12 +6458,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / KIParlaForest entry -->
-      
-      <!-- start of Italian / Valico entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Valico</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,508 tokens 6,784 words 6,784 nodes 398 sentences">6K</span></span>
@@ -7081,8 +6471,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.535463"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Manually corrected Treebank of Learner Italian drawn from the Valico corpus and correspondent corrected sentences.
 
@@ -7094,12 +6484,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / Valico entry -->
-      
-      <!-- start of Italian / Old entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Old</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="119,060 tokens 122,024 words 122,330 nodes 3,419 sentences">122K</span></span>
@@ -7108,8 +6497,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="poetry"><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007250"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Italian-Old is a treebank containing **Dante Alighieri&#39;s Comedy** (composed between approximately 1306 and 1321), based on the 1994 Petrocchi edition and taken from the [**DanteSearch corpus**](https://dantesearch.dantenetwork.it), originally created at the University of Pisa, Italy. It is a treebank of Old Italian, specifically  Florentine.
 
@@ -7121,12 +6510,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / Old entry -->
-      
-      <!-- start of Italian / ParlaMint entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ParlaMint</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,141 tokens 20,460 words 20,460 nodes 701 sentences">20K</span></span>
@@ -7135,8 +6523,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="government legal"><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006432"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ParlaMint-It is a collection of transcriptions of parliamentary sessions of the Italian Senate annotated in Universal Dependencies. The corpus is part of a larger multilingual collection of parliamentary transcripts built during the ParlaMint project (https://www.clarin.eu/parlamint).
 
@@ -7148,12 +6536,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / ParlaMint entry -->
-      
-      <!-- start of Italian / ParTUT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ParTUT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="51,614 tokens 55,558 words 55,558 nodes 2,090 sentences">55K</span></span>
@@ -7162,8 +6549,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal news wiki"><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006338"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Italian-ParTUT is a conversion of a multilingual parallel treebank developed at the University of Turin,
 and consisting of a variety of text genres, including talks, legal texts and Wikipedia articles, among others.
@@ -7176,12 +6563,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / ParTUT entry -->
-      
-      <!-- start of Italian / TWITTIRO entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TWITTIRO</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="28,384 tokens 29,602 words 29,602 nodes 1,424 sentences">29K</span></span>
@@ -7190,8 +6576,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005585"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         TWITTIRÒ-UD is a collection of ironic Italian tweets annotated in Universal Dependencies.
 The treebank can be exploited for the training of NLP systems to enhance their performance on social media texts, and in particular, for irony detection purposes.
@@ -7204,12 +6590,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / TWITTIRO entry -->
-      
-      <!-- start of Italian / PoSTWITA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PoSTWITA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="119,334 tokens 124,515 words 124,515 nodes 6,712 sentences">124K</span></span>
@@ -7218,8 +6603,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005272"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         PoSTWITA-UD is a collection of Italian tweets annotated in Universal Dependencies that can be exploited for the training of NLP systems to enhance their performance on social media texts.
 
@@ -7231,12 +6616,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / PoSTWITA entry -->
-      
-      <!-- start of Italian / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="22,183 tokens 23,732 words 23,732 nodes 1,000 sentences">23K</span></span>
@@ -7245,8 +6629,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005012"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -7260,12 +6644,11 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / PUD entry -->
-      
-      <!-- start of Italian / MarkIT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MarkIT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="38,237 tokens 40,488 words 40,488 nodes 1,292 sentences">40K</span></span>
@@ -7274,8 +6657,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004927"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The MarkIT resource contains around 800 sentences extracted from students&#39; essays manually annotated with syntactic depencendies. The treebank covers seven types of marked constructions, plus some ambiguous sentences whose syntax can be wrongly classified as marked.
 
@@ -7287,11 +6670,10 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / MarkIT entry -->
-      
-    </div> <!-- end of Italian treebank list -->
+    </details>
+    
+    <!-- end of Italian treebank list -->
 
     
     See <a href="treebanks/it-comparison.html">here</a> for comparative statistics of Italian treebanks.
@@ -7303,35 +6685,29 @@ <h3> Language documentation </h3>
     See the <a href="it/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Italian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Italian accordion row -->
 
   <!-- start of Japanese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/JP.svg" /></span>
-    <span class="doublewidespan">Japanese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,645,130 tokens 2,645,130 words 2,645,130 nodes 132,418 sentences">2,645K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction web wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Japanese</span>
-  </div>
-  <!-- end of Japanese accordion row -->
-
-  <!-- start of Japanese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ja">
+      <span class="flagspan"><img class="flag" src="flags/svg/JP.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Japanese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,645,130 tokens 2,645,130 words 2,645,130 nodes 132,418 sentences">2,645K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction web wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Japanese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Japanese treebanks</h3>
 
     <!-- start of Japanese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Japanese / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="193,654 tokens 193,654 words 193,654 nodes 8,100 sentences">193K</span></span>
@@ -7340,8 +6716,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.614711"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies (UD) Japanese treebank is based on the definition of UD Japanese convention described in the UD documentation.  The original sentences are from Google UDT 2.0.
 
@@ -7353,12 +6729,11 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / GSD entry -->
-      
-      <!-- start of Japanese / GSDLUW entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSDLUW</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="150,243 tokens 150,243 words 150,243 nodes 8,100 sentences">150K</span></span>
@@ -7367,8 +6742,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.581887"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies (UD) Japanese treebank is based on the definition of UD Japanese convention described in the UD documentation.  The original sentences are from Google UDT 2.0.
 
@@ -7380,12 +6755,11 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / GSDLUW entry -->
-      
-      <!-- start of Japanese / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="28,788 tokens 28,788 words 28,788 nodes 1,000 sentences">28K</span></span>
@@ -7394,8 +6768,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.463623"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -7409,12 +6783,11 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / PUD entry -->
-      
-      <!-- start of Japanese / PUDLUW entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUDLUW</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="22,910 tokens 22,910 words 22,910 nodes 1,000 sentences">22K</span></span>
@@ -7423,8 +6796,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.451378"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -7438,12 +6811,11 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / PUDLUW entry -->
-      
-      <!-- start of Japanese / BCCWJ entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BCCWJ</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,253,903 tokens 1,253,903 words 1,253,903 nodes 57,109 sentences">1,253K</span></span>
@@ -7452,8 +6824,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction web"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.064591"><img src="/img/stars05.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies (UD) Japanese treebank is based on the definition of
 UD Japanese convention described in the UD documentation.
@@ -7467,12 +6839,11 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / BCCWJ entry -->
-      
-      <!-- start of Japanese / BCCWJLUW entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BCCWJLUW</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="995,632 tokens 995,632 words 995,632 nodes 57,109 sentences">995K</span></span>
@@ -7481,8 +6852,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction web"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.064327"><img src="/img/stars05.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies (UD) Japanese treebank is based on the definition of
 UD Japanese convention described in the UD documentation.
@@ -7499,11 +6870,10 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / BCCWJLUW entry -->
-      
-    </div> <!-- end of Japanese treebank list -->
+    </details>
+    
+    <!-- end of Japanese treebank list -->
 
     
     See <a href="treebanks/ja-comparison.html">here</a> for comparative statistics of Japanese treebanks.
@@ -7515,35 +6885,29 @@ <h3> Language documentation </h3>
     See the <a href="ja/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Japanese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Japanese accordion row -->
 
   <!-- start of Javanese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ID.svg" /></span>
-    <span class="doublewidespan">Javanese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="13,746 tokens 14,343 words 14,343 nodes 1,000 sentences">14K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Austronesian, Javanese</span>
-  </div>
-  <!-- end of Javanese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-jv">
+      <span class="flagspan"><img class="flag" src="flags/svg/ID.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Javanese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="13,746 tokens 14,343 words 14,343 nodes 1,000 sentences">14K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Austronesian, Javanese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Javanese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Javanese treebanks</h3>
 
     <!-- start of Javanese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Javanese / CSUI entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-jv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CSUI</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="13,746 tokens 14,343 words 14,343 nodes 1,000 sentences">14K</span></span>
@@ -7552,8 +6916,8 @@ <h3>Javanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.330676"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Javanese-CSUI is a dependency treebank in Javanese, a regional language in Indonesia with more than 68 million users. It was developed by Alfina et al. from the Faculty of Computer Science, Universitas Indonesia. The newest version has 1000 sentences and 14K words with manual annotation.
 
@@ -7565,11 +6929,10 @@ <h3>Javanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Javanese / CSUI entry -->
-      
-    </div> <!-- end of Javanese treebank list -->
+    </details>
+    
+    <!-- end of Javanese treebank list -->
 
     
 
@@ -7579,35 +6942,29 @@ <h3> Language documentation </h3>
     See the <a href="jv/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Javanese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Javanese accordion row -->
 
   <!-- start of Kaapor accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Kaapor</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="366 tokens 366 words 366 nodes 83 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Tupian, Maweti-Guarani</span>
-  </div>
-  <!-- end of Kaapor accordion row -->
-
-  <!-- start of Kaapor accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-urb">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kaapor</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="366 tokens 366 words 366 nodes 83 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Tupian, Maweti-Guarani</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Kaapor treebanks</h3>
 
     <!-- start of Kaapor treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kaapor / TuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-urb">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="366 tokens 366 words 366 nodes 83 sentences">&lt;1K</span></span>
@@ -7616,8 +6973,8 @@ <h3>Kaapor treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002749"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         **UD_Kaapor-TuDeT** is a collection of annotated sentences in [Ka&#39;apor](https://glottolog.org/resource/languoid/id/urub1250). The project is a work in progress and the treebank is being updated on a regular basis.
 
@@ -7629,11 +6986,10 @@ <h3>Kaapor treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kaapor / TuDeT entry -->
-      
-    </div> <!-- end of Kaapor treebank list -->
+    </details>
+    
+    <!-- end of Kaapor treebank list -->
 
     
 
@@ -7643,35 +6999,29 @@ <h3> Language documentation </h3>
     See the <a href="urb/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Kaapor accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kaapor accordion row -->
 
   <!-- start of Kadiweu accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Kadiweu</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="306 tokens 318 words 318 nodes 71 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Guaicuruan</span>
-  </div>
-  <!-- end of Kadiweu accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-kbc">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kadiweu</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="306 tokens 318 words 318 nodes 71 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Guaicuruan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Kadiweu accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Kadiweu treebanks</h3>
 
     <!-- start of Kadiweu treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kadiweu / Unicamp entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-kbc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Unicamp</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="306 tokens 318 words 318 nodes 71 sentences">&lt;1K</span></span>
@@ -7680,8 +7030,8 @@ <h3>Kadiweu treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.337067"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Kadiweu-UNICAMP is a treebank for [Kadiwéu](https://glottolog.org/resource/languoid/id/kadi1248) (ISO-639: `kbc`), an endangered Indigenous language of Brazil. It consists of isolated sentences produced by native speakers.
 
@@ -7693,11 +7043,10 @@ <h3>Kadiweu treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kadiweu / Unicamp entry -->
-      
-    </div> <!-- end of Kadiweu treebank list -->
+    </details>
+    
+    <!-- end of Kadiweu treebank list -->
 
     
 
@@ -7707,35 +7056,29 @@ <h3> Language documentation </h3>
     See the <a href="kbc/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Kadiweu accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kadiweu accordion row -->
 
   <!-- start of Kangri accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Kangri</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,514 tokens 2,514 words 2,514 nodes 288 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Kangri accordion row -->
-
-  <!-- start of Kangri accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-xnr">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kangri</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,514 tokens 2,514 words 2,514 nodes 288 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Kangri treebanks</h3>
 
     <!-- start of Kangri treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kangri / KDTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-xnr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KDTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,514 tokens 2,514 words 2,514 nodes 288 sentences">2K</span></span>
@@ -7744,8 +7087,8 @@ <h3>Kangri treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002875"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Kangri UD Treebank (KDTB) is a part of the Universal Dependency treebank project.
 
@@ -7757,11 +7100,10 @@ <h3>Kangri treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kangri / KDTB entry -->
-      
-    </div> <!-- end of Kangri treebank list -->
+    </details>
+    
+    <!-- end of Kangri treebank list -->
 
     
 
@@ -7771,35 +7113,29 @@ <h3> Language documentation </h3>
     See the <a href="xnr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Kangri accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kangri accordion row -->
 
   <!-- start of Karelian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-KR.svg" /></span>
-    <span class="doublewidespan">Karelian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,094 tokens 3,094 words 3,094 nodes 228 sentences">3K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
-    <span class="triplewidespan">Uralic, Finnic</span>
-  </div>
-  <!-- end of Karelian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-krl">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-KR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Karelian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,094 tokens 3,094 words 3,094 nodes 228 sentences">3K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
+      <span class="triplewidespan">Uralic, Finnic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Karelian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Karelian treebanks</h3>
 
     <!-- start of Karelian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Karelian / KKPP entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-krl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KKPP</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,094 tokens 3,094 words 3,094 nodes 228 sentences">3K</span></span>
@@ -7808,8 +7144,8 @@ <h3>Karelian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.480630"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Karelian-KKPP is a manually annotated new corpus of Karelian made in
 Universal dependencies annotation scheme. The data is collected from
@@ -7824,11 +7160,10 @@ <h3>Karelian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Karelian / KKPP entry -->
-      
-    </div> <!-- end of Karelian treebank list -->
+    </details>
+    
+    <!-- end of Karelian treebank list -->
 
     
 
@@ -7838,35 +7173,29 @@ <h3> Language documentation </h3>
     See the <a href="krl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Karelian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Karelian accordion row -->
 
   <!-- start of Karo accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Karo</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,319 tokens 2,319 words 2,319 nodes 674 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Tupian, Ramarama</span>
-  </div>
-  <!-- end of Karo accordion row -->
-
-  <!-- start of Karo accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-arr">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Karo</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,319 tokens 2,319 words 2,319 nodes 674 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Tupian, Ramarama</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Karo treebanks</h3>
 
     <!-- start of Karo treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Karo / TuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-arr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,319 tokens 2,319 words 2,319 nodes 674 sentences">2K</span></span>
@@ -7875,8 +7204,8 @@ <h3>Karo treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.366399"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Karo-TuDeT is a collection of annotated sentences in &lt;a href=&#34;https://glottolog.org/resource/languoid/id/karo1306&#34;&gt; Karo&lt;/a&gt;. The sentences stem from the only grammatical description of the language (Gabas, 1999) and from the sentences in the dictionary by the same author (Gabas, 2007).  Sentence annotation and documentation by Fabrício Ferraz Gerardi.
 
@@ -7888,11 +7217,10 @@ <h3>Karo treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Karo / TuDeT entry -->
-      
-    </div> <!-- end of Karo treebank list -->
+    </details>
+    
+    <!-- end of Karo treebank list -->
 
     
 
@@ -7902,35 +7230,29 @@ <h3> Language documentation </h3>
     See the <a href="arr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Karo accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Karo accordion row -->
 
   <!-- start of Kazakh accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/KZ.svg" /></span>
-    <span class="doublewidespan">Kazakh</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="10,495 tokens 10,536 words 10,536 nodes 1,078 sentences">10K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news wiki"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Turkic, Northwestern</span>
-  </div>
-  <!-- end of Kazakh accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-kk">
+      <span class="flagspan"><img class="flag" src="flags/svg/KZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kazakh</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="10,495 tokens 10,536 words 10,536 nodes 1,078 sentences">10K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news wiki"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Turkic, Northwestern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Kazakh accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Kazakh treebanks</h3>
 
     <!-- start of Kazakh treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kazakh / KTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-kk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="10,495 tokens 10,536 words 10,536 nodes 1,078 sentences">10K</span></span>
@@ -7939,8 +7261,8 @@ <h3>Kazakh treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news wiki"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005549"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Kazakh treebank is a combination of text from various sources including Wikipedia, some folk tales,
 sentences from the UDHR, news and phrasebook sentences. Sentences IDs include partial document identifiers.
@@ -7953,11 +7275,10 @@ <h3>Kazakh treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kazakh / KTB entry -->
-      
-    </div> <!-- end of Kazakh treebank list -->
+    </details>
+    
+    <!-- end of Kazakh treebank list -->
 
     
 
@@ -7967,35 +7288,29 @@ <h3> Language documentation </h3>
     See the <a href="kk/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Kazakh accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kazakh accordion row -->
 
   <!-- start of Khoekhoe accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NA.svg" /></span>
-    <span class="doublewidespan">Khoekhoe</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="27,611 tokens 29,007 words 29,007 nodes 3,589 sentences">29K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Khoe-Kwadi</span>
-  </div>
-  <!-- end of Khoekhoe accordion row -->
-
-  <!-- start of Khoekhoe accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-naq">
+      <span class="flagspan"><img class="flag" src="flags/svg/NA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Khoekhoe</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="27,611 tokens 29,007 words 29,007 nodes 3,589 sentences">29K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Khoe-Kwadi</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Khoekhoe treebanks</h3>
 
     <!-- start of Khoekhoe treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Khoekhoe / KDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-naq">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="27,611 tokens 29,007 words 29,007 nodes 3,589 sentences">29K</span></span>
@@ -8004,8 +7319,8 @@ <h3>Khoekhoe treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.570607"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD\_Khoekhoe-KDT is a Universal Dependencies (UD) treebank for the Khoekhoegowab (Khoekhoe) language. The annotation was performed manually based on glosses. This treebank includes texts from various sources: fiction, grammar, and spoken conversation. The treebank contains **27k tokens**, distributed as follows:
 
@@ -8021,11 +7336,10 @@ <h3>Khoekhoe treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Khoekhoe / KDT entry -->
-      
-    </div> <!-- end of Khoekhoe treebank list -->
+    </details>
+    
+    <!-- end of Khoekhoe treebank list -->
 
     
 
@@ -8035,35 +7349,29 @@ <h3> Language documentation </h3>
     See the <a href="naq/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Khoekhoe accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Khoekhoe accordion row -->
 
   <!-- start of Kiche accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GT-QC.svg" /></span>
-    <span class="doublewidespan">Kiche</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="9,396 tokens 10,013 words 10,013 nodes 1,435 sentences">10K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction government grammar-examples legal medical wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Mayan</span>
-  </div>
-  <!-- end of Kiche accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-quc">
+      <span class="flagspan"><img class="flag" src="flags/svg/GT-QC.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kiche</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="9,396 tokens 10,013 words 10,013 nodes 1,435 sentences">10K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction government grammar-examples legal medical wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Mayan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Kiche accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Kiche treebanks</h3>
 
     <!-- start of Kiche treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kiche / IU entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-quc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IU</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="9,396 tokens 10,013 words 10,013 nodes 1,435 sentences">10K</span></span>
@@ -8072,8 +7380,8 @@ <h3>Kiche treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction government grammar-examples legal medical wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006118"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Kʼicheʼ-IU is a treebank consisting of sentences from a variety of text domains but principally dictionary example
 sentences and linguistic examples.
@@ -8086,11 +7394,10 @@ <h3>Kiche treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kiche / IU entry -->
-      
-    </div> <!-- end of Kiche treebank list -->
+    </details>
+    
+    <!-- end of Kiche treebank list -->
 
     
 
@@ -8100,35 +7407,29 @@ <h3> Language documentation </h3>
     See the <a href="quc/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Kiche accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kiche accordion row -->
 
   <!-- start of Komi Permyak accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-PER-KPO.svg" /></span>
-    <span class="doublewidespan">Komi Permyak</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,151 tokens 1,151 words 1,151 nodes 140 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Uralic, Permic</span>
-  </div>
-  <!-- end of Komi Permyak accordion row -->
-
-  <!-- start of Komi Permyak accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-koi">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-PER-KPO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Komi Permyak</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,151 tokens 1,151 words 1,151 nodes 140 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Uralic, Permic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Komi Permyak treebanks</h3>
 
     <!-- start of Komi Permyak treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Komi Permyak / UH entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-koi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UH</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,151 tokens 1,151 words 1,151 nodes 140 sentences">1K</span></span>
@@ -8137,8 +7438,8 @@ <h3>Komi Permyak treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.349942"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a Komi-Permyak literary language treebank consisting of original and translated texts.
 
@@ -8150,11 +7451,10 @@ <h3>Komi Permyak treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Komi Permyak / UH entry -->
-      
-    </div> <!-- end of Komi Permyak treebank list -->
+    </details>
+    
+    <!-- end of Komi Permyak treebank list -->
 
     
 
@@ -8164,35 +7464,29 @@ <h3> Language documentation </h3>
     See the <a href="koi/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Komi Permyak accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Komi Permyak accordion row -->
 
   <!-- start of Komi Zyrian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-KO.svg" /></span>
-    <span class="doublewidespan">Komi Zyrian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="10,448 tokens 10,505 words 10,505 nodes 887 sentences">10K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction spoken"><i class="fa fa-book"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Uralic, Permic</span>
-  </div>
-  <!-- end of Komi Zyrian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-kpv">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-KO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Komi Zyrian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="10,448 tokens 10,505 words 10,505 nodes 887 sentences">10K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction spoken"><i class="fa fa-book"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Uralic, Permic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Komi Zyrian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Komi Zyrian treebanks</h3>
 
     <!-- start of Komi Zyrian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Komi Zyrian / Lattice entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-kpv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Lattice</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="8,144 tokens 8,196 words 8,196 nodes 673 sentences">8K</span></span>
@@ -8201,8 +7495,8 @@ <h3>Komi Zyrian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.418149"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Komi-Zyrian Lattice is a treebank of written standard Komi-Zyrian.
 
@@ -8214,12 +7508,11 @@ <h3>Komi Zyrian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Komi Zyrian / Lattice entry -->
-      
-      <!-- start of Komi Zyrian / IKDP entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-kpv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IKDP</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,304 tokens 2,309 words 2,309 nodes 214 sentences">2K</span></span>
@@ -8228,8 +7521,8 @@ <h3>Komi Zyrian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.356109"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank consists of dialectal transcriptions of spoken Komi-Zyrian. The current texts are short recorded segments from different areas where the Iźva dialect of Komi language is spoken.
 
@@ -8241,11 +7534,10 @@ <h3>Komi Zyrian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Komi Zyrian / IKDP entry -->
-      
-    </div> <!-- end of Komi Zyrian treebank list -->
+    </details>
+    
+    <!-- end of Komi Zyrian treebank list -->
 
     
     See <a href="treebanks/kpv-comparison.html">here</a> for comparative statistics of Komi Zyrian treebanks.
@@ -8257,35 +7549,29 @@ <h3> Language documentation </h3>
     See the <a href="kpv/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Komi Zyrian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Komi Zyrian accordion row -->
 
   <!-- start of Korean accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/KR.svg" /></span>
-    <span class="doublewidespan">Korean</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="5 treebanks">5</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="615,756 tokens 615,756 words 619,837 nodes 53,622 sentences">615K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction learner-essays news wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-edit"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Korean</span>
-  </div>
-  <!-- end of Korean accordion row -->
-
-  <!-- start of Korean accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ko">
+      <span class="flagspan"><img class="flag" src="flags/svg/KR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Korean</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="5 treebanks">5</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="615,756 tokens 615,756 words 619,837 nodes 53,622 sentences">615K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction learner-essays news wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-edit"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Korean</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Korean treebanks</h3>
 
     <!-- start of Korean treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Korean / KSL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ko">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KSL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="155,104 tokens 155,104 words 155,104 nodes 17,369 sentences">155K</span></span>
@@ -8294,8 +7580,8 @@ <h3>Korean treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.675683"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Korean-KSL is a dependency treebank of second-language (L2) Korean.
 
@@ -8307,12 +7593,11 @@ <h3>Korean treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Korean / KSL entry -->
-      
-      <!-- start of Korean / Kaist entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ko">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Kaist</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="350,090 tokens 350,090 words 350,090 nodes 27,363 sentences">350K</span></span>
@@ -8321,8 +7606,8 @@ <h3>Korean treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic fiction news"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006625"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The KAIST Korean Universal Dependency Treebank is generated by Chun et al., 2018 from the constituency trees in the [KAIST Tree-Tagging Corpus](http://semanticweb.kaist.ac.kr/home/index.php/Corpus4).
 
@@ -8334,12 +7619,11 @@ <h3>Korean treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Korean / Kaist entry -->
-      
-      <!-- start of Korean / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ko">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="80,322 tokens 80,322 words 80,322 nodes 6,339 sentences">80K</span></span>
@@ -8348,8 +7632,8 @@ <h3>Korean treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005351"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Google Korean Universal Dependency Treebank is first converted from the [Universal
 Dependency Treebank v2.0 (legacy)](https://github.com/ryanmcd/uni-dep-tb), and then enhanced by Chun et al., 2018.
@@ -8362,12 +7646,11 @@ <h3>Korean treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Korean / GSD entry -->
-      
-      <!-- start of Korean / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ko">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="16,584 tokens 16,584 words 16,584 nodes 1,000 sentences">16K</span></span>
@@ -8376,8 +7659,8 @@ <h3>Korean treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003713"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -8391,12 +7674,11 @@ <h3>Korean treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Korean / PUD entry -->
-      
-      <!-- start of Korean / LittlePrince entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ko">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LittlePrince</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="13,656 tokens 13,656 words 17,737 nodes 1,551 sentences">13K</span></span>
@@ -8405,8 +7687,8 @@ <h3>Korean treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002051"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Korean-LittlePrince is a UD adaptation of the k-SNACS dataset
 [(Hwang et al. 2020)](https://aclanthology.org/2020.dmr-1.6/).
@@ -8419,11 +7701,10 @@ <h3>Korean treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Korean / LittlePrince entry -->
-      
-    </div> <!-- end of Korean treebank list -->
+    </details>
+    
+    <!-- end of Korean treebank list -->
 
     
     See <a href="treebanks/ko-comparison.html">here</a> for comparative statistics of Korean treebanks.
@@ -8435,35 +7716,29 @@ <h3> Language documentation </h3>
     See the <a href="ko/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Korean accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Korean accordion row -->
 
   <!-- start of Kyrgyz accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/KG.svg" /></span>
-    <span class="doublewidespan">Kyrgyz</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="25,342 tokens 25,378 words 25,378 nodes 2,703 sentences">25K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Turkic, Northwestern</span>
-  </div>
-  <!-- end of Kyrgyz accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ky">
+      <span class="flagspan"><img class="flag" src="flags/svg/KG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kyrgyz</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="25,342 tokens 25,378 words 25,378 nodes 2,703 sentences">25K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Turkic, Northwestern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Kyrgyz accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Kyrgyz treebanks</h3>
 
     <!-- start of Kyrgyz treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kyrgyz / KTMU entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ky">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KTMU</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="24,128 tokens 24,128 words 24,128 nodes 2,530 sentences">24K</span></span>
@@ -8472,8 +7747,8 @@ <h3>Kyrgyz treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.608916"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Kyrgyz-KTMU is dependency parsing based treebank in Kyrgyz language. The dataset mostly contains headlines from Kyrgyz news websites.
 
@@ -8485,12 +7760,11 @@ <h3>Kyrgyz treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kyrgyz / KTMU entry -->
-      
-      <!-- start of Kyrgyz / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ky">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,214 tokens 1,250 words 1,250 nodes 173 sentences">1K</span></span>
@@ -8499,8 +7773,8 @@ <h3>Kyrgyz treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003550"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a small treebank of grammatical examples for Kyrgyz.
 It is part of a parallel Universal Dependencies corpus containing 148 sentences across four Turkic languages, designed to facilitate cross-linguistic research on these related languages.
@@ -8513,11 +7787,10 @@ <h3>Kyrgyz treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kyrgyz / TueCL entry -->
-      
-    </div> <!-- end of Kyrgyz treebank list -->
+    </details>
+    
+    <!-- end of Kyrgyz treebank list -->
 
     
     See <a href="treebanks/ky-comparison.html">here</a> for comparative statistics of Kyrgyz treebanks.
@@ -8529,35 +7802,29 @@ <h3> Language documentation </h3>
     See the <a href="ky/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Kyrgyz accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kyrgyz accordion row -->
 
   <!-- start of Latgalian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/LV-LTG.svg" /></span>
-    <span class="doublewidespan">Latgalian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="170 tokens 170 words 173 nodes 20 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Baltic</span>
-  </div>
-  <!-- end of Latgalian accordion row -->
-
-  <!-- start of Latgalian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ltg">
+      <span class="flagspan"><img class="flag" src="flags/svg/LV-LTG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Latgalian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="170 tokens 170 words 173 nodes 20 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Baltic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Latgalian treebanks</h3>
 
     <!-- start of Latgalian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Latgalian / Cairo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ltg">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Cairo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="170 tokens 170 words 173 nodes 20 sentences">&lt;1K</span></span>
@@ -8566,8 +7833,8 @@ <h3>Latgalian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.337350"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Latgalian-Cairo is an example treebank to provide minimal dataset for Latgalian based on the Cairo sample sentences. Created by [AI Lab](http://ailab.lv) at Institute of Mathematics and Computer Science, University of Latvia.
 
@@ -8579,11 +7846,10 @@ <h3>Latgalian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latgalian / Cairo entry -->
-      
-    </div> <!-- end of Latgalian treebank list -->
+    </details>
+    
+    <!-- end of Latgalian treebank list -->
 
     
 
@@ -8593,35 +7859,29 @@ <h3> Language documentation </h3>
     See the <a href="ltg/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Latgalian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Latgalian accordion row -->
 
   <!-- start of Latin accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/VA.svg" /></span>
-    <span class="doublewidespan">Latin</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,010,878 tokens 1,012,325 words 1,012,325 nodes 60,657 sentences">1,012K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible email fiction legal nonfiction poetry"><i class="fa fa-cloud"></i><i class="fa fa-envelope"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
-    <span class="triplewidespan">IE, Italic</span>
-  </div>
-  <!-- end of Latin accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-la">
+      <span class="flagspan"><img class="flag" src="flags/svg/VA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Latin</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,010,878 tokens 1,012,325 words 1,012,325 nodes 60,657 sentences">1,012K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible email fiction legal nonfiction poetry"><i class="fa fa-cloud"></i><i class="fa fa-envelope"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
+      <span class="triplewidespan">IE, Italic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Latin accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Latin treebanks</h3>
 
     <!-- start of Latin treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Latin / ITTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-la">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ITTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="450,480 tokens 450,517 words 450,517 nodes 26,977 sentences">450K</span></span>
@@ -8630,8 +7890,8 @@ <h3>Latin treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.750561"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Latin data from the _Index Thomisticus_ Treebank. Data are taken from the _Index Thomisticus_ corpus by Roberto Busa SJ, which contains the complete work by Thomas Aquinas (1225–1274; Medieval Latin) and by 61 other authors related to Thomas.
 
@@ -8643,12 +7903,11 @@ <h3>Latin treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latin / ITTB entry -->
-      
-      <!-- start of Latin / LLCT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-la">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LLCT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="242,391 tokens 242,411 words 242,411 nodes 9,023 sentences">242K</span></span>
@@ -8657,8 +7916,8 @@ <h3>Latin treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.726207"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies version of the **LLCT** (Late Latin Charter Treebank) consists of an automated conversion of the **LLCT2** treebank from the Latin Dependency Treebank (LDT) format into the Universal Dependencies standard.
 
@@ -8670,12 +7929,11 @@ <h3>Latin treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latin / LLCT entry -->
-      
-      <!-- start of Latin / UDante entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-la">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UDante</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="55,286 tokens 55,553 words 55,553 nodes 1,723 sentences">55K</span></span>
@@ -8684,8 +7942,8 @@ <h3>Latin treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="email nonfiction poetry"><i class="fa fa-envelope"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.692196"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The **UDante** treebank is based on the Latin texts of Dante Alighieri, taken from the [**DanteSearch corpus**](https://dantesearch.dantenetwork.it), originally created at the University of Pisa, Italy.
 
@@ -8699,12 +7957,11 @@ <h3>Latin treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latin / UDante entry -->
-      
-      <!-- start of Latin / CIRCSE entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-la">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CIRCSE</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="28,287 tokens 29,055 words 29,055 nodes 1,972 sentences">29K</span></span>
@@ -8713,8 +7970,8 @@ <h3>Latin treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction poetry"><i class="fa fa-book"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.612060"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Latin-CIRCSE is a repository of treebanks featuring Latin texts natively annotated at the CIRCSE Research Centre in Milan (https://centridiricerca.unicatt.it/circse/en.html) following the Universal Dependencies (UD) (https://universaldependencies.org) annotation scheme.
 The repository includes prose and poetry texts from different periods.
@@ -8727,12 +7984,11 @@ <h3>Latin treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latin / CIRCSE entry -->
-      
-      <!-- start of Latin / Perseus entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-la">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Perseus</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="28,868 tokens 29,223 words 29,223 nodes 2,273 sentences">29K</span></span>
@@ -8741,8 +7997,8 @@ <h3>Latin treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 2.5"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.577807"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies Latin Treebank consists of an automatic
 conversion of a selection of passages from the Ancient Greek and Latin
@@ -8756,12 +8012,11 @@ <h3>Latin treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latin / Perseus entry -->
-      
-      <!-- start of Latin / PROIEL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-la">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PROIEL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="205,566 tokens 205,566 words 205,566 nodes 18,689 sentences">205K</span></span>
@@ -8770,8 +8025,8 @@ <h3>Latin treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006926"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Latin PROIEL treebank is based on the Latin data from the PROIEL treebank, and contains most of the Vulgate New Testament translations plus selections from Caesar&#39;s Gallic War, Cicero&#39;s Letters to Atticus, Palladius&#39; Opus Agriculturae and the first book of Cicero&#39;s De officiis.
 
@@ -8783,11 +8038,10 @@ <h3>Latin treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latin / PROIEL entry -->
-      
-    </div> <!-- end of Latin treebank list -->
+    </details>
+    
+    <!-- end of Latin treebank list -->
 
     
     See <a href="treebanks/la-comparison.html">here</a> for comparative statistics of Latin treebanks.
@@ -8799,35 +8053,29 @@ <h3> Language documentation </h3>
     See the <a href="la/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Latin accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Latin accordion row -->
 
   <!-- start of Latvian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/LV.svg" /></span>
-    <span class="doublewidespan">Latvian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="330,486 tokens 330,486 words 331,365 nodes 19,600 sentences">330K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction grammar-examples legal news spoken"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Baltic</span>
-  </div>
-  <!-- end of Latvian accordion row -->
-
-  <!-- start of Latvian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-lv">
+      <span class="flagspan"><img class="flag" src="flags/svg/LV.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Latvian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="330,486 tokens 330,486 words 331,365 nodes 19,600 sentences">330K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction grammar-examples legal news spoken"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Baltic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Latvian treebanks</h3>
 
     <!-- start of Latvian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Latvian / LVTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-lv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LVTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="330,318 tokens 330,318 words 331,194 nodes 19,580 sentences">330K</span></span>
@@ -8836,8 +8084,8 @@ <h3>Latvian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic fiction legal news spoken"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.786488"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Latvian UD Treebank is based on Latvian Treebank ([LVTB](http://sintakse.korpuss.lv)), being created at University of Latvia, Institute of Mathematics and Computer Science, [Artificial Intelligence Laboratory](http://ailab.lv).
 
@@ -8849,12 +8097,11 @@ <h3>Latvian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latvian / LVTB entry -->
-      
-      <!-- start of Latvian / Cairo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-lv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Cairo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="168 tokens 168 words 171 nodes 20 sentences">&lt;1K</span></span>
@@ -8863,8 +8110,8 @@ <h3>Latvian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.337350"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is an example treebank made to ilustrate UD annotation choices made for Latvian based on the Cairo sample sentences. Created by [AI Lab](http://ailab.lv) at Institute of Mathematics and Computer Science, University of Latvia.
 
@@ -8876,11 +8123,10 @@ <h3>Latvian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Latvian / Cairo entry -->
-      
-    </div> <!-- end of Latvian treebank list -->
+    </details>
+    
+    <!-- end of Latvian treebank list -->
 
     
     See <a href="treebanks/lv-comparison.html">here</a> for comparative statistics of Latvian treebanks.
@@ -8892,35 +8138,29 @@ <h3> Language documentation </h3>
     See the <a href="lv/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Latvian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Latvian accordion row -->
 
   <!-- start of Ligurian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IT-LIG.svg" /></span>
-    <span class="doublewidespan">Ligurian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6,568 tokens 6,928 words 6,928 nodes 316 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples news nonfiction spoken wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Ligurian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-lij">
+      <span class="flagspan"><img class="flag" src="flags/svg/IT-LIG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Ligurian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6,568 tokens 6,928 words 6,928 nodes 316 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples news nonfiction spoken wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Ligurian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Ligurian treebanks</h3>
 
     <!-- start of Ligurian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Ligurian / GLT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-lij">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GLT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,568 tokens 6,928 words 6,928 nodes 316 sentences">6K</span></span>
@@ -8929,8 +8169,8 @@ <h3>Ligurian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples news nonfiction spoken wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="C-UDA 1.0">?</span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005706"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Genoese Ligurian Treebank is a small, manually annotated collection of contemporary Ligurian prose. The focus of the treebank is written Genoese, the koiné variety of Ligurian which is associated with today&#39;s literary, journalistic and academic ligurophone sphere.
 
@@ -8942,11 +8182,10 @@ <h3>Ligurian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ligurian / GLT entry -->
-      
-    </div> <!-- end of Ligurian treebank list -->
+    </details>
+    
+    <!-- end of Ligurian treebank list -->
 
     
 
@@ -8956,35 +8195,29 @@ <h3> Language documentation </h3>
     See the <a href="lij/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Ligurian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Ligurian accordion row -->
 
   <!-- start of Lithuanian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/LT.svg" /></span>
-    <span class="doublewidespan">Lithuanian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="75,403 tokens 75,403 words 75,405 nodes 3,905 sentences">75K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Baltic</span>
-  </div>
-  <!-- end of Lithuanian accordion row -->
-
-  <!-- start of Lithuanian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-lt">
+      <span class="flagspan"><img class="flag" src="flags/svg/LT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Lithuanian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="75,403 tokens 75,403 words 75,405 nodes 3,905 sentences">75K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Baltic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Lithuanian treebanks</h3>
 
     <!-- start of Lithuanian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Lithuanian / ALKSNIS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-lt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ALKSNIS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="70,047 tokens 70,047 words 70,049 nodes 3,642 sentences">70K</span></span>
@@ -8993,8 +8226,8 @@ <h3>Lithuanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.682747"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Lithuanian dependency treebank ALKSNIS v3.0 (Vytautas Magnus University).
 
@@ -9006,12 +8239,11 @@ <h3>Lithuanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Lithuanian / ALKSNIS entry -->
-      
-      <!-- start of Lithuanian / HSE entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-lt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HSE</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,356 tokens 5,356 words 5,356 nodes 263 sentences">5K</span></span>
@@ -9020,8 +8252,8 @@ <h3>Lithuanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004606"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Lithuanian treebank annotated manually (dependencies) using the Morphological Annotator by CCL, Vytautas Magnus University (http://tekstynas.vdu.lt/) and manual disambiguation.
 A pilot version which includes news and an essay by Tomas Venclova is available here.
@@ -9034,11 +8266,10 @@ <h3>Lithuanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Lithuanian / HSE entry -->
-      
-    </div> <!-- end of Lithuanian treebank list -->
+    </details>
+    
+    <!-- end of Lithuanian treebank list -->
 
     
     See <a href="treebanks/lt-comparison.html">here</a> for comparative statistics of Lithuanian treebanks.
@@ -9050,35 +8281,29 @@ <h3> Language documentation </h3>
     See the <a href="lt/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Lithuanian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Lithuanian accordion row -->
 
   <!-- start of Livvi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-KR.svg" /></span>
-    <span class="doublewidespan">Livvi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,632 tokens 1,632 words 1,632 nodes 125 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
-    <span class="triplewidespan">Uralic, Finnic</span>
-  </div>
-  <!-- end of Livvi accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-olo">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-KR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Livvi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,632 tokens 1,632 words 1,632 nodes 125 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
+      <span class="triplewidespan">Uralic, Finnic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Livvi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Livvi treebanks</h3>
 
     <!-- start of Livvi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Livvi / KKPP entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-olo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KKPP</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,632 tokens 1,632 words 1,632 nodes 125 sentences">1K</span></span>
@@ -9087,8 +8312,8 @@ <h3>Livvi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.449337"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Livvi-KKPP is a manually annotated new corpus of Livvi-Karelian made directly
 in the Universal dependencies annotation scheme. The data is collected from
@@ -9103,11 +8328,10 @@ <h3>Livvi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Livvi / KKPP entry -->
-      
-    </div> <!-- end of Livvi treebank list -->
+    </details>
+    
+    <!-- end of Livvi treebank list -->
 
     
 
@@ -9117,35 +8341,29 @@ <h3> Language documentation </h3>
     See the <a href="olo/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Livvi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Livvi accordion row -->
 
   <!-- start of Low Saxon accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/DE-HANNOVER.svg" /></span>
-    <span class="doublewidespan">Low Saxon</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="22,615 tokens 22,639 words 22,639 nodes 1,000 sentences">22K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Low Saxon accordion row -->
-
-  <!-- start of Low Saxon accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-nds">
+      <span class="flagspan"><img class="flag" src="flags/svg/DE-HANNOVER.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Low Saxon</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="22,615 tokens 22,639 words 22,639 nodes 1,000 sentences">22K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Low Saxon treebanks</h3>
 
     <!-- start of Low Saxon treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Low Saxon / LSDC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-nds">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LSDC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="22,615 tokens 22,639 words 22,639 nodes 1,000 sentences">22K</span></span>
@@ -9154,8 +8372,8 @@ <h3>Low Saxon treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006611"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Low Saxon LSDC dataset consists of sentences in 8 major Low Saxon dialect groups from both Germany and the Netherlands. These sentences are (or are to become) part of the LSDC dataset and represent the language from mostly the 19th and early 20th century in genres such as short stories, novels, speeches, letters and fairytales.
 
@@ -9167,11 +8385,10 @@ <h3>Low Saxon treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Low Saxon / LSDC entry -->
-      
-    </div> <!-- end of Low Saxon treebank list -->
+    </details>
+    
+    <!-- end of Low Saxon treebank list -->
 
     
 
@@ -9181,35 +8398,29 @@ <h3> Language documentation </h3>
     See the <a href="nds/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Low Saxon accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Low Saxon accordion row -->
 
   <!-- start of Luxembourgish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/LU.svg" /></span>
-    <span class="doublewidespan">Luxembourgish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="204 tokens 206 words 206 nodes 20 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Luxembourgish accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-lb">
+      <span class="flagspan"><img class="flag" src="flags/svg/LU.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Luxembourgish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="204 tokens 206 words 206 nodes 20 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Luxembourgish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Luxembourgish treebanks</h3>
 
     <!-- start of Luxembourgish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Luxembourgish / LuxBank entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-lb">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LuxBank</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="204 tokens 206 words 206 nodes 20 sentences">&lt;1K</span></span>
@@ -9218,8 +8429,8 @@ <h3>Luxembourgish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.275645"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The LuxBank corpus currently consists of the translated Cairo Cicling examples, and will be extended to include examples from a national dataset. It is the first comprehensive tree bank dataset for Luxembourgish.
 
@@ -9231,11 +8442,10 @@ <h3>Luxembourgish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Luxembourgish / LuxBank entry -->
-      
-    </div> <!-- end of Luxembourgish treebank list -->
+    </details>
+    
+    <!-- end of Luxembourgish treebank list -->
 
     
 
@@ -9245,35 +8455,29 @@ <h3> Language documentation </h3>
     See the <a href="lb/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Luxembourgish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Luxembourgish accordion row -->
 
   <!-- start of Macedonian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MK.svg" /></span>
-    <span class="doublewidespan">Macedonian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,360 tokens 1,360 words 1,360 nodes 155 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Macedonian accordion row -->
-
-  <!-- start of Macedonian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-mk">
+      <span class="flagspan"><img class="flag" src="flags/svg/MK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Macedonian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,360 tokens 1,360 words 1,360 nodes 155 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Macedonian treebanks</h3>
 
     <!-- start of Macedonian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Macedonian / MTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-mk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,360 tokens 1,360 words 1,360 nodes 155 sentences">1K</span></span>
@@ -9282,8 +8486,8 @@ <h3>Macedonian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004398"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Macedonian-MTB treebank is a collection of annotated sentences taken from the Macedonian version of the Cairo CICLing Corpus and from the university textbook in syntax &#34;Contemporary Macedonian Language 4&#34; by Simov Sazdov.
 
@@ -9295,11 +8499,10 @@ <h3>Macedonian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Macedonian / MTB entry -->
-      
-    </div> <!-- end of Macedonian treebank list -->
+    </details>
+    
+    <!-- end of Macedonian treebank list -->
 
     
 
@@ -9309,35 +8512,29 @@ <h3> Language documentation </h3>
     See the <a href="mk/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Macedonian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Macedonian accordion row -->
 
   <!-- start of Madi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Madi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="114 tokens 115 words 115 nodes 20 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Arawan</span>
-  </div>
-  <!-- end of Madi accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-jaa">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Madi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="114 tokens 115 words 115 nodes 20 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Arawan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Madi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Madi treebanks</h3>
 
     <!-- start of Madi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Madi / Jarawara entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-jaa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Jarawara</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="114 tokens 115 words 115 nodes 20 sentences">&lt;1K</span></span>
@@ -9346,8 +8543,8 @@ <h3>Madi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.335477"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Madi-Jarawara is a collection of annotated sentences in Madí (Jarawara dialect)
 from a variety of sources, including grammar examples, oral stories, didatic material, and dictionary examples.
@@ -9360,11 +8557,10 @@ <h3>Madi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Madi / Jarawara entry -->
-      
-    </div> <!-- end of Madi treebank list -->
+    </details>
+    
+    <!-- end of Madi treebank list -->
 
     
 
@@ -9374,35 +8570,29 @@ <h3> Language documentation </h3>
     See the <a href="jaa/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Madi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Madi accordion row -->
 
   <!-- start of Maghrebi Arabic French accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/DZ.svg" /></span>
-    <span class="doublewidespan">Maghrebi Arabic French</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="18,561 tokens 19,793 words 19,793 nodes 1,287 sentences">19K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Code switching</span>
-  </div>
-  <!-- end of Maghrebi Arabic French accordion row -->
-
-  <!-- start of Maghrebi Arabic French accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-qaf">
+      <span class="flagspan"><img class="flag" src="flags/svg/DZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Maghrebi Arabic French</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="18,561 tokens 19,793 words 19,793 nodes 1,287 sentences">19K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Code switching</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Maghrebi Arabic French treebanks</h3>
 
     <!-- start of Maghrebi Arabic French treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Maghrebi Arabic French / Arabizi entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-qaf">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Arabizi</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="18,561 tokens 19,793 words 19,793 nodes 1,287 sentences">19K</span></span>
@@ -9411,8 +8601,8 @@ <h3>Maghrebi Arabic French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004809"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for a romanized user-generated content variety of Algerian, a North-African Arabic dialect known for its frequent usage of code-switching. We added to the UD annotations NER annotations extending the French Treebank NER scheme (Sagot et al, 2012) and Offensive language classification and corrected many of the translations (still ongoing).
 
@@ -9424,11 +8614,10 @@ <h3>Maghrebi Arabic French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Maghrebi Arabic French / Arabizi entry -->
-      
-    </div> <!-- end of Maghrebi Arabic French treebank list -->
+    </details>
+    
+    <!-- end of Maghrebi Arabic French treebank list -->
 
     
 
@@ -9438,35 +8627,29 @@ <h3> Language documentation </h3>
     See the <a href="qaf/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Maghrebi Arabic French accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Maghrebi Arabic French accordion row -->
 
   <!-- start of Makurap accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Makurap</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="178 tokens 178 words 178 nodes 37 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Tupian, Tupari</span>
-  </div>
-  <!-- end of Makurap accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-mpu">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Makurap</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="178 tokens 178 words 178 nodes 37 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Tupian, Tupari</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Makurap accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Makurap treebanks</h3>
 
     <!-- start of Makurap treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Makurap / TuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-mpu">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="178 tokens 178 words 178 nodes 37 sentences">&lt;1K</span></span>
@@ -9475,8 +8658,8 @@ <h3>Makurap treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.242375"><img src="/img/stars10.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Makuráp-TuDeT is a collection of annotated texts in Makuráp. The project is a work in progress and the treebank is being updated on a regular basis. The sentences are being annotated by Carolina Aragon, Fabrício Ferraz Gerardi, Luana dos Santos, and Luan Cabral.
 
@@ -9488,11 +8671,10 @@ <h3>Makurap treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Makurap / TuDeT entry -->
-      
-    </div> <!-- end of Makurap treebank list -->
+    </details>
+    
+    <!-- end of Makurap treebank list -->
 
     
 
@@ -9502,35 +8684,29 @@ <h3> Language documentation </h3>
     See the <a href="mpu/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Makurap accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Makurap accordion row -->
 
   <!-- start of Malayalam accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Malayalam</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,090 tokens 2,403 words 2,403 nodes 218 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Dravidian</span>
-  </div>
-  <!-- end of Malayalam accordion row -->
-
-  <!-- start of Malayalam accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ml">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Malayalam</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,090 tokens 2,403 words 2,403 nodes 218 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Dravidian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Malayalam treebanks</h3>
 
     <!-- start of Malayalam treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Malayalam / UFAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ml">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UFAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,090 tokens 2,403 words 2,403 nodes 218 sentences">2K</span></span>
@@ -9539,8 +8715,8 @@ <h3>Malayalam treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004708"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Currently just a small sample of Malayalam grammatical examples.
 
@@ -9552,11 +8728,10 @@ <h3>Malayalam treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Malayalam / UFAL entry -->
-      
-    </div> <!-- end of Malayalam treebank list -->
+    </details>
+    
+    <!-- end of Malayalam treebank list -->
 
     
 
@@ -9566,35 +8741,29 @@ <h3> Language documentation </h3>
     See the <a href="ml/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Malayalam accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Malayalam accordion row -->
 
   <!-- start of Maltese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MT.svg" /></span>
-    <span class="doublewidespan">Maltese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="44,162 tokens 44,162 words 44,162 nodes 2,074 sentences">44K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Maltese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-mt">
+      <span class="flagspan"><img class="flag" src="flags/svg/MT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Maltese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="44,162 tokens 44,162 words 44,162 nodes 2,074 sentences">44K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Maltese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Maltese treebanks</h3>
 
     <!-- start of Maltese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Maltese / MUDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-mt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MUDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="44,162 tokens 44,162 words 44,162 nodes 2,074 sentences">44K</span></span>
@@ -9603,8 +8772,8 @@ <h3>Maltese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction legal news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.519472"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         MUDT (Maltese Universal Dependencies Treebank) is a manually annotated treebank of Maltese, a Semitic language of Malta descended from North African Arabic with a significant amount of Italo-Romance influence.
 MUDT was designed as a balanced corpus with four major genres (see Splitting below) represented roughly equally.
@@ -9617,11 +8786,10 @@ <h3>Maltese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Maltese / MUDT entry -->
-      
-    </div> <!-- end of Maltese treebank list -->
+    </details>
+    
+    <!-- end of Maltese treebank list -->
 
     
 
@@ -9631,35 +8799,29 @@ <h3> Language documentation </h3>
     See the <a href="mt/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Maltese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Maltese accordion row -->
 
   <!-- start of Manx accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IM.svg" /></span>
-    <span class="doublewidespan">Manx</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="18,580 tokens 20,725 words 20,725 nodes 2,336 sentences">20K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible blog fiction news nonfiction social web wiki"><i class="fa fa-cloud"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Celtic</span>
-  </div>
-  <!-- end of Manx accordion row -->
-
-  <!-- start of Manx accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gv">
+      <span class="flagspan"><img class="flag" src="flags/svg/IM.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Manx</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="18,580 tokens 20,725 words 20,725 nodes 2,336 sentences">20K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible blog fiction news nonfiction social web wiki"><i class="fa fa-cloud"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Celtic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Manx treebanks</h3>
 
     <!-- start of Manx treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Manx / Cadhan entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Cadhan</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="18,580 tokens 20,725 words 20,725 nodes 2,336 sentences">20K</span></span>
@@ -9668,8 +8830,8 @@ <h3>Manx treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible blog fiction news nonfiction social web wiki"><i class="fa fa-cloud"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006324"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is the Cadhan Aonair UD treebank for Manx Gaelic,
 created by Kevin Scannell.
@@ -9682,11 +8844,10 @@ <h3>Manx treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Manx / Cadhan entry -->
-      
-    </div> <!-- end of Manx treebank list -->
+    </details>
+    
+    <!-- end of Manx treebank list -->
 
     
 
@@ -9696,35 +8857,29 @@ <h3> Language documentation </h3>
     See the <a href="gv/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Manx accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Manx accordion row -->
 
   <!-- start of Marathi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Marathi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="121,704 tokens 122,045 words 122,045 nodes 10,072 sentences">122K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction government grammar-examples news wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Marathi accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-mr">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Marathi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="121,704 tokens 122,045 words 122,045 nodes 10,072 sentences">122K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction government grammar-examples news wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Marathi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Marathi treebanks</h3>
 
     <!-- start of Marathi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Marathi / UFAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-mr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UFAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,506 tokens 3,847 words 3,847 nodes 466 sentences">3K</span></span>
@@ -9733,8 +8888,8 @@ <h3>Marathi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction wiki"><i class="fa fa-book"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.505214"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Marathi is a manually annotated treebank consisting primarily of stories from Wikisource, and parts of an article on Wikipedia.
 
@@ -9746,12 +8901,11 @@ <h3>Marathi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Marathi / UFAL entry -->
-      
-      <!-- start of Marathi / CMUPAN entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-mr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CMUPAN</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="118,198 tokens 118,198 words 118,198 nodes 9,606 sentences">118K</span></span>
@@ -9760,8 +8914,8 @@ <h3>Marathi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic government grammar-examples news"><i class="fa fa-graduation-cap"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.483013"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank is a modified version of a semi-automatically treebank authord by Aditi Chaudhary, which in turn is based on the treebanks released by KCIS, IIIT-Hyderabad. Additionally, the treebank also contains Marathi-Discourse: A manually annotated 35-sentence corpus covering political discourse.
 
@@ -9773,11 +8927,10 @@ <h3>Marathi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Marathi / CMUPAN entry -->
-      
-    </div> <!-- end of Marathi treebank list -->
+    </details>
+    
+    <!-- end of Marathi treebank list -->
 
     
     See <a href="treebanks/mr-comparison.html">here</a> for comparative statistics of Marathi treebanks.
@@ -9789,35 +8942,29 @@ <h3> Language documentation </h3>
     See the <a href="mr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Marathi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Marathi accordion row -->
 
   <!-- start of Mbya Guarani accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PY.svg" /></span>
-    <span class="doublewidespan">Mbya Guarani</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,318 tokens 1,318 words 1,318 nodes 98 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Tupian, Maweti-Guarani</span>
-  </div>
-  <!-- end of Mbya Guarani accordion row -->
-
-  <!-- start of Mbya Guarani accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gun">
+      <span class="flagspan"><img class="flag" src="flags/svg/PY.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Mbya Guarani</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,318 tokens 1,318 words 1,318 nodes 98 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Tupian, Maweti-Guarani</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Mbya Guarani treebanks</h3>
 
     <!-- start of Mbya Guarani treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Mbya Guarani / Thomas entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gun">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Thomas</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,318 tokens 1,318 words 1,318 nodes 98 sentences">1K</span></span>
@@ -9826,8 +8973,8 @@ <h3>Mbya Guarani treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.001353"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Mbya_Guarani-Thomas is a corpus of Mbyá Guaraní (Tupian) texts collected by Guillaume Thomas. The current version of the corpus consists of three speeches by Paulina Kerechu Núñez Romero, a Mbyá Guaraní speaker from Ytu, Caazapá Department, Paraguay.
 
@@ -9839,11 +8986,10 @@ <h3>Mbya Guarani treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Mbya Guarani / Thomas entry -->
-      
-    </div> <!-- end of Mbya Guarani treebank list -->
+    </details>
+    
+    <!-- end of Mbya Guarani treebank list -->
 
     
     See <a href="treebanks/gun-comparison.html">here</a> for comparative statistics of Mbya Guarani treebanks.
@@ -9855,35 +9001,29 @@ <h3> Language documentation </h3>
     See the <a href="gun/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Mbya Guarani accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Mbya Guarani accordion row -->
 
   <!-- start of Middle Armenian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AM-RUBENID.svg" /></span>
-    <span class="doublewidespan">Middle Armenian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,028 tokens 1,093 words 1,093 nodes 27 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal medical"><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i></span></span>
-    <span class="triplewidespan">IE, Armenian</span>
-  </div>
-  <!-- end of Middle Armenian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-axm">
+      <span class="flagspan"><img class="flag" src="flags/svg/AM-RUBENID.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Middle Armenian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,028 tokens 1,093 words 1,093 nodes 27 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal medical"><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i></span></span>
+      <span class="triplewidespan">IE, Armenian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Middle Armenian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Middle Armenian treebanks</h3>
 
     <!-- start of Middle Armenian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Middle Armenian / ArmTDP entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-axm">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ArmTDP</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,028 tokens 1,093 words 1,093 nodes 27 sentences">1K</span></span>
@@ -9892,8 +9032,8 @@ <h3>Middle Armenian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal medical"><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.418667"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies treebank for Middle Armenian developed for UD originally by the ArmTDP team led by Marat M. Yavrumyan at the Yerevan State University.
 
@@ -9905,11 +9045,10 @@ <h3>Middle Armenian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Middle Armenian / ArmTDP entry -->
-      
-    </div> <!-- end of Middle Armenian treebank list -->
+    </details>
+    
+    <!-- end of Middle Armenian treebank list -->
 
     
 
@@ -9919,35 +9058,29 @@ <h3> Language documentation </h3>
     See the <a href="axm/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Middle Armenian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Middle Armenian accordion row -->
 
   <!-- start of Middle French accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR-ROYAL.svg" /></span>
-    <span class="doublewidespan">Middle French</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="124,372 tokens 126,085 words 126,085 nodes 6,188 sentences">126K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal nonfiction"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Middle French accordion row -->
-
-  <!-- start of Middle French accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-frm">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR-ROYAL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Middle French</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="124,372 tokens 126,085 words 126,085 nodes 6,188 sentences">126K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction legal nonfiction"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Middle French treebanks</h3>
 
     <!-- start of Middle French treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Middle French / ALTM entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-frm">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ALTM</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,953 tokens 7,084 words 7,084 nodes 217 sentences">7K</span></span>
@@ -9956,8 +9089,8 @@ <h3>Middle French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.509166"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Middle-French ALTM (AUTOMATED Legal Texts Medieval) is a treebank of medieval legal French from Normandy.
 Currently in contains one text, an extract from _Coutume, style et usage au temps des Échiquiers de Normandie_, dated 1425.
@@ -9970,12 +9103,11 @@ <h3>Middle French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Middle French / ALTM entry -->
-      
-      <!-- start of Middle French / PROFITEROLE entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-frm">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PROFITEROLE</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="117,419 tokens 119,001 words 119,001 nodes 5,971 sentences">119K</span></span>
@@ -9984,8 +9116,8 @@ <h3>Middle French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.455250"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Middle_French-PROFITEROLE is the Middle French section of the PROFITEROLE corpus, the Old French section is UD_OLD_FRENCH-PROFITEROLE.
 
@@ -9997,11 +9129,10 @@ <h3>Middle French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Middle French / PROFITEROLE entry -->
-      
-    </div> <!-- end of Middle French treebank list -->
+    </details>
+    
+    <!-- end of Middle French treebank list -->
 
     
     See <a href="treebanks/frm-comparison.html">here</a> for comparative statistics of Middle French treebanks.
@@ -10013,35 +9144,29 @@ <h3> Language documentation </h3>
     See the <a href="frm/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Middle French accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Middle French accordion row -->
 
   <!-- start of Moksha accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-MOKSHA.svg" /></span>
-    <span class="doublewidespan">Moksha</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4,572 tokens 4,579 words 4,579 nodes 490 sentences">4K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Uralic, Mordvin</span>
-  </div>
-  <!-- end of Moksha accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-mdf">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-MOKSHA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Moksha</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4,572 tokens 4,579 words 4,579 nodes 490 sentences">4K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Uralic, Mordvin</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Moksha accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Moksha treebanks</h3>
 
     <!-- start of Moksha treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Moksha / JR entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-mdf">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">JR</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4,572 tokens 4,579 words 4,579 nodes 490 sentences">4K</span></span>
@@ -10050,8 +9175,8 @@ <h3>Moksha treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.435380"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Erme Universal Dependencies annotated texts Moksha are the origin of UD_Moksha-JR with annotation (CoNLL-U) for texts in the Moksha language,
 it originally consists of a sample from a number of fiction authors writing originals in Moksha.
@@ -10064,11 +9189,10 @@ <h3>Moksha treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Moksha / JR entry -->
-      
-    </div> <!-- end of Moksha treebank list -->
+    </details>
+    
+    <!-- end of Moksha treebank list -->
 
     
 
@@ -10078,35 +9202,29 @@ <h3> Language documentation </h3>
     See the <a href="mdf/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Moksha accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Moksha accordion row -->
 
   <!-- start of Munduruku accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Munduruku</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,016 tokens 1,022 words 1,022 nodes 158 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Tupian, Munduruku</span>
-  </div>
-  <!-- end of Munduruku accordion row -->
-
-  <!-- start of Munduruku accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-myu">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Munduruku</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,016 tokens 1,022 words 1,022 nodes 158 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Tupian, Munduruku</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Munduruku treebanks</h3>
 
     <!-- start of Munduruku treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Munduruku / TuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-myu">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,016 tokens 1,022 words 1,022 nodes 158 sentences">1K</span></span>
@@ -10115,8 +9233,8 @@ <h3>Munduruku treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002961"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Munduruku-TuDeT is a collection of annotated sentences in [Mundurukú](http://www.endangeredlanguages.com/lang/2981). The project is a work in progress and the treebank is being updated on a regular basis.
 
@@ -10134,11 +9252,10 @@ <h3>Munduruku treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Munduruku / TuDeT entry -->
-      
-    </div> <!-- end of Munduruku treebank list -->
+    </details>
+    
+    <!-- end of Munduruku treebank list -->
 
     
 
@@ -10148,35 +9265,29 @@ <h3> Language documentation </h3>
     See the <a href="myu/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Munduruku accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Munduruku accordion row -->
 
   <!-- start of Naga accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Naga</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,098 tokens 3,123 words 3,123 nodes 584 sentences">3K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples"><i class="fa fa-book"></i><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Sino-Tibetan, Tangkhul-Maring</span>
-  </div>
-  <!-- end of Naga accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-nmf">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Naga</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,098 tokens 3,123 words 3,123 nodes 584 sentences">3K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples"><i class="fa fa-book"></i><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Sino-Tibetan, Tangkhul-Maring</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Naga accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Naga treebanks</h3>
 
     <!-- start of Naga treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Naga / Suansu entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-nmf">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Suansu</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,098 tokens 3,123 words 3,123 nodes 584 sentences">3K</span></span>
@@ -10185,8 +9296,8 @@ <h3>Naga treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples"><i class="fa fa-book"></i><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.494035"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Naga-Suansu is a Universal Dependencies (UD) treebank for Suansu (Glottocode: suan1234), an endangered Tibeto-Burman language spoken on the Indo-Myanmar border. The annotation was performed manually based on glosses. This treebank includes texts from fiction and grammar. The treebank contains **3.1k** tokens, distributed as follows:
 
@@ -10201,11 +9312,10 @@ <h3>Naga treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Naga / Suansu entry -->
-      
-    </div> <!-- end of Naga treebank list -->
+    </details>
+    
+    <!-- end of Naga treebank list -->
 
     
 
@@ -10215,35 +9325,29 @@ <h3> Language documentation </h3>
     See the <a href="nmf/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Naga accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Naga accordion row -->
 
   <!-- start of Naija accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NG.svg" /></span>
-    <span class="doublewidespan">Naija</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="140,837 tokens 140,837 words 140,837 nodes 9,241 sentences">140K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Creole</span>
-  </div>
-  <!-- end of Naija accordion row -->
-
-  <!-- start of Naija accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-pcm">
+      <span class="flagspan"><img class="flag" src="flags/svg/NG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Naija</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="140,837 tokens 140,837 words 140,837 nodes 9,241 sentences">140K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Creole</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Naija treebanks</h3>
 
     <!-- start of Naija treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Naija / NSC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pcm">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">NSC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="140,837 tokens 140,837 words 140,837 nodes 9,241 sentences">140K</span></span>
@@ -10252,8 +9356,8 @@ <h3>Naija treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.609555"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for spoken Naija (Nigerian Pidgin).
 
@@ -10265,11 +9369,10 @@ <h3>Naija treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Naija / NSC entry -->
-      
-    </div> <!-- end of Naija treebank list -->
+    </details>
+    
+    <!-- end of Naija treebank list -->
 
     
 
@@ -10279,35 +9382,29 @@ <h3> Language documentation </h3>
     See the <a href="pcm/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Naija accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Naija accordion row -->
 
   <!-- start of Neapolitan accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IT-CAM.svg" /></span>
-    <span class="doublewidespan">Neapolitan</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="198 tokens 201 words 201 nodes 20 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Neapolitan accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-nap">
+      <span class="flagspan"><img class="flag" src="flags/svg/IT-CAM.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Neapolitan</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="198 tokens 201 words 201 nodes 20 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Neapolitan accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Neapolitan treebanks</h3>
 
     <!-- start of Neapolitan treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Neapolitan / RB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-nap">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">RB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="198 tokens 201 words 201 nodes 20 sentences">&lt;1K</span></span>
@@ -10316,8 +9413,8 @@ <h3>Neapolitan treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.379639"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank contains example sentences in Neapolitan, translated by a native speaker.
 
@@ -10329,11 +9426,10 @@ <h3>Neapolitan treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Neapolitan / RB entry -->
-      
-    </div> <!-- end of Neapolitan treebank list -->
+    </details>
+    
+    <!-- end of Neapolitan treebank list -->
 
     
 
@@ -10343,35 +9439,29 @@ <h3> Language documentation </h3>
     See the <a href="nap/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Neapolitan accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Neapolitan accordion row -->
 
   <!-- start of Nenets accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-NEN.svg" /></span>
-    <span class="doublewidespan">Nenets</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,272 tokens 1,272 words 1,272 nodes 170 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Uralic, Samoyedic</span>
-  </div>
-  <!-- end of Nenets accordion row -->
-
-  <!-- start of Nenets accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-yrk">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-NEN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Nenets</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,272 tokens 1,272 words 1,272 nodes 170 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Uralic, Samoyedic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Nenets treebanks</h3>
 
     <!-- start of Nenets treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Nenets / Tundra entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-yrk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Tundra</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,272 tokens 1,272 words 1,272 nodes 170 sentences">1K</span></span>
@@ -10380,8 +9470,8 @@ <h3>Nenets treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.311758"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Tundra Nenets UD treebank is converted from the [Tundra Nenets mSUD treebank](https://github.com/surfacesyntacticud/mSUD_Nenets-Tundra). The conversion from mSUD to UD is performed automatically followed by a comprehensive manual revision to ensure compliance with the UD annotation standards.
 
@@ -10393,11 +9483,10 @@ <h3>Nenets treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Nenets / Tundra entry -->
-      
-    </div> <!-- end of Nenets treebank list -->
+    </details>
+    
+    <!-- end of Nenets treebank list -->
 
     
 
@@ -10407,35 +9496,29 @@ <h3> Language documentation </h3>
     See the <a href="yrk/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Nenets accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Nenets accordion row -->
 
   <!-- start of Nepali accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NP.svg" /></span>
-    <span class="doublewidespan">Nepali</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="801 tokens 801 words 801 nodes 69 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Nepali accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ne">
+      <span class="flagspan"><img class="flag" src="flags/svg/NP.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Nepali</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="801 tokens 801 words 801 nodes 69 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Nepali accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Nepali treebanks</h3>
 
     <!-- start of Nepali treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Nepali / BK entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ne">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BK</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="801 tokens 801 words 801 nodes 69 sentences">&lt;1K</span></span>
@@ -10444,8 +9527,8 @@ <h3>Nepali treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.417432"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Nepali-BK is a manually annotated Universal Dependencies treebank for Nepali, an Indo-Aryan language written in Devanagari. The treebank contains sentences from a fictional narrative story and an argumentative discourse text, and follows the Universal Dependencies v2 guidelines.
 
@@ -10457,11 +9540,10 @@ <h3>Nepali treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Nepali / BK entry -->
-      
-    </div> <!-- end of Nepali treebank list -->
+    </details>
+    
+    <!-- end of Nepali treebank list -->
 
     
 
@@ -10471,35 +9553,29 @@ <h3> Language documentation </h3>
     See the <a href="ne/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Nepali accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Nepali accordion row -->
 
   <!-- start of Nheengatu accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Nheengatu</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="26,444 tokens 26,848 words 26,848 nodes 2,839 sentences">26K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Tupian, Maweti-Guarani</span>
-  </div>
-  <!-- end of Nheengatu accordion row -->
-
-  <!-- start of Nheengatu accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-yrl">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Nheengatu</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="26,444 tokens 26,848 words 26,848 nodes 2,839 sentences">26K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Tupian, Maweti-Guarani</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Nheengatu treebanks</h3>
 
     <!-- start of Nheengatu treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Nheengatu / CompLin entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-yrl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CompLin</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="26,444 tokens 26,848 words 26,848 nodes 2,839 sentences">26K</span></span>
@@ -10508,8 +9584,8 @@ <h3>Nheengatu treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.688805"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         [UD_Nheengatu-CompLin](https://aclanthology.org/2024.propor-2.8) is a treebank of [Nheengatu](https://glottolog.org/resource/languoid/id/nhen1239), also known as Modern Tupi and *Língua Geral Amazônica* (ISO 639: `yrl`). It comprises sentences drawn from a wide range of published sources, including spontaneous speech, grammatical descriptions, fables, myths, coursebooks, and dictionaries.
 
@@ -10521,11 +9597,10 @@ <h3>Nheengatu treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Nheengatu / CompLin entry -->
-      
-    </div> <!-- end of Nheengatu treebank list -->
+    </details>
+    
+    <!-- end of Nheengatu treebank list -->
 
     
 
@@ -10535,35 +9610,29 @@ <h3> Language documentation </h3>
     See the <a href="yrl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Nheengatu accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Nheengatu accordion row -->
 
   <!-- start of North Sami accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SAMI.svg" /></span>
-    <span class="doublewidespan">North Sami</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="26,845 tokens 26,845 words 26,845 nodes 3,122 sentences">26K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Uralic, Sami</span>
-  </div>
-  <!-- end of North Sami accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sme">
+      <span class="flagspan"><img class="flag" src="flags/svg/SAMI.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">North Sami</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="26,845 tokens 26,845 words 26,845 nodes 3,122 sentences">26K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Uralic, Sami</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of North Sami accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>North Sami treebanks</h3>
 
     <!-- start of North Sami treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of North Sami / Giella entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sme">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Giella</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="26,845 tokens 26,845 words 26,845 nodes 3,122 sentences">26K</span></span>
@@ -10572,8 +9641,8 @@ <h3>North Sami treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.554223"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a North Sámi treebank based on a manually disambiguated and function-labelled gold-standard
 corpus of North Sámi produced by the Giellatekno team at UiT Norgga árktalaš universitehta.
@@ -10586,11 +9655,10 @@ <h3>North Sami treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of North Sami / Giella entry -->
-      
-    </div> <!-- end of North Sami treebank list -->
+    </details>
+    
+    <!-- end of North Sami treebank list -->
 
     
 
@@ -10600,35 +9668,29 @@ <h3> Language documentation </h3>
     See the <a href="sme/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of North Sami accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of North Sami accordion row -->
 
   <!-- start of Northern Kurdish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" /></span>
-    <span class="doublewidespan">Northern Kurdish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="10,188 tokens 10,259 words 10,259 nodes 754 sentences">10K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction wiki"><i class="fa fa-book"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Northern Kurdish accordion row -->
-
-  <!-- start of Northern Kurdish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-kmr">
+      <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Northern Kurdish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="10,188 tokens 10,259 words 10,259 nodes 754 sentences">10K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction wiki"><i class="fa fa-book"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Northern Kurdish treebanks</h3>
 
     <!-- start of Northern Kurdish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Northern Kurdish / Kurmanji entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-kmr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Kurmanji</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="10,188 tokens 10,259 words 10,259 nodes 754 sentences">10K</span></span>
@@ -10637,8 +9699,8 @@ <h3>Northern Kurdish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction wiki"><i class="fa fa-book"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005191"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The treebank is a corpus of Kurmanji Kurdish. It contains fiction and encyclopaedic texts in
 roughly equal measure. It has been annotated natively in accordance with the UD annotation scheme.
@@ -10651,11 +9713,10 @@ <h3>Northern Kurdish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Northern Kurdish / Kurmanji entry -->
-      
-    </div> <!-- end of Northern Kurdish treebank list -->
+    </details>
+    
+    <!-- end of Northern Kurdish treebank list -->
 
     
 
@@ -10665,35 +9726,29 @@ <h3> Language documentation </h3>
     See the <a href="kmr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Northern Kurdish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Northern Kurdish accordion row -->
 
   <!-- start of Northwest Gbaya accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CF.svg" /></span>
-    <span class="doublewidespan">Northwest Gbaya</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,692 tokens 2,692 words 2,692 nodes 403 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Niger-Congo, Gbaya-Manza-Ngbaka</span>
-  </div>
-  <!-- end of Northwest Gbaya accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gya">
+      <span class="flagspan"><img class="flag" src="flags/svg/CF.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Northwest Gbaya</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,692 tokens 2,692 words 2,692 nodes 403 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Niger-Congo, Gbaya-Manza-Ngbaka</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Northwest Gbaya accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Northwest Gbaya treebanks</h3>
 
     <!-- start of Northwest Gbaya treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Northwest Gbaya / Autogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gya">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Autogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,692 tokens 2,692 words 2,692 nodes 403 sentences">2K</span></span>
@@ -10702,8 +9757,8 @@ <h3>Northwest Gbaya treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.377038"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for Northwest Gbaya, a member of the Gbaya branch of the Atlantic-Congo phylum. The language is mainly spoken by about 250,000 speakers in Central African Republic.
 
@@ -10715,11 +9770,10 @@ <h3>Northwest Gbaya treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Northwest Gbaya / Autogramm entry -->
-      
-    </div> <!-- end of Northwest Gbaya treebank list -->
+    </details>
+    
+    <!-- end of Northwest Gbaya treebank list -->
 
     
 
@@ -10729,35 +9783,29 @@ <h3> Language documentation </h3>
     See the <a href="gya/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Northwest Gbaya accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Northwest Gbaya accordion row -->
 
   <!-- start of Norwegian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NO.svg" /></span>
-    <span class="doublewidespan">Norwegian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="611,574 tokens 611,574 words 611,574 nodes 37,619 sentences">611K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Norwegian accordion row -->
-
-  <!-- start of Norwegian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-no">
+      <span class="flagspan"><img class="flag" src="flags/svg/NO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Norwegian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="611,574 tokens 611,574 words 611,574 nodes 37,619 sentences">611K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Norwegian treebanks</h3>
 
     <!-- start of Norwegian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Norwegian / Bokmaal entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-no">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Bokmaal</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="310,221 tokens 310,221 words 310,221 nodes 20,044 sentences">310K</span></span>
@@ -10766,8 +9814,8 @@ <h3>Norwegian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007413"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Norwegian UD treebank is based on the Bokmål section of the Norwegian
 Dependency Treebank (NDT), which is a syntactic treebank of Norwegian. The current version of NDT has been automatically converted to the UD
@@ -10782,12 +9830,11 @@ <h3>Norwegian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Norwegian / Bokmaal entry -->
-      
-      <!-- start of Norwegian / Nynorsk entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-no">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Nynorsk</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="301,353 tokens 301,353 words 301,353 nodes 17,575 sentences">301K</span></span>
@@ -10796,8 +9843,8 @@ <h3>Norwegian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007398"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Norwegian UD treebank is based on the Nynorsk section of the Norwegian
 Dependency Treebank (NDT), which is a syntactic treebank of Norwegian.
@@ -10812,11 +9859,10 @@ <h3>Norwegian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Norwegian / Nynorsk entry -->
-      
-    </div> <!-- end of Norwegian treebank list -->
+    </details>
+    
+    <!-- end of Norwegian treebank list -->
 
     
     See <a href="treebanks/no-comparison.html">here</a> for comparative statistics of Norwegian treebanks.
@@ -10828,35 +9874,29 @@ <h3> Language documentation </h3>
     See the <a href="no/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Norwegian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Norwegian accordion row -->
 
   <!-- start of Occitan accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR-OCC.svg" /></span>
-    <span class="doublewidespan">Occitan</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="25,121 tokens 25,619 words 25,619 nodes 1,522 sentences">25K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Occitan accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-oc">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR-OCC.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Occitan</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="25,121 tokens 25,619 words 25,619 nodes 1,522 sentences">25K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Occitan accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Occitan treebanks</h3>
 
     <!-- start of Occitan treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Occitan / TTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-oc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="25,121 tokens 25,619 words 25,619 nodes 1,522 sentences">25K</span></span>
@@ -10865,8 +9905,8 @@ <h3>Occitan treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005732"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Tolosa Treebank was developed as part of the EFA 227/16 LINGUATEC Project, financed by the POCTEFA Interreg European funds.
 It includes data from literature, newspapers, encyclopedia, scientific papers and web blogs.
@@ -10879,11 +9919,10 @@ <h3>Occitan treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Occitan / TTB entry -->
-      
-    </div> <!-- end of Occitan treebank list -->
+    </details>
+    
+    <!-- end of Occitan treebank list -->
 
     
 
@@ -10893,35 +9932,29 @@ <h3> Language documentation </h3>
     See the <a href="oc/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Occitan accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Occitan accordion row -->
 
   <!-- start of Odia accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Odia</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="5,818 tokens 5,818 words 5,818 nodes 456 sentences">5K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Odia accordion row -->
-
-  <!-- start of Odia accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-or">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Odia</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="5,818 tokens 5,818 words 5,818 nodes 456 sentences">5K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Odia treebanks</h3>
 
     <!-- start of Odia treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Odia / ODTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-or">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ODTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,818 tokens 5,818 words 5,818 nodes 456 sentences">5K</span></span>
@@ -10930,8 +9963,8 @@ <h3>Odia treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.338185"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Odia UD Treebank (ODTB) is a part of the Universal Dependency treebank project.
 
@@ -10943,11 +9976,10 @@ <h3>Odia treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Odia / ODTB entry -->
-      
-    </div> <!-- end of Odia treebank list -->
+    </details>
+    
+    <!-- end of Odia treebank list -->
 
     
 
@@ -10957,35 +9989,29 @@ <h3> Language documentation </h3>
     See the <a href="or/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Odia accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Odia accordion row -->
 
   <!-- start of Old Church Slavonic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MORAVA.svg" /></span>
-    <span class="doublewidespan">Old Church Slavonic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="198,843 tokens 198,843 words 198,843 nodes 22,628 sentences">198K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Old Church Slavonic accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-cu">
+      <span class="flagspan"><img class="flag" src="flags/svg/MORAVA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Church Slavonic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="198,843 tokens 198,843 words 198,843 nodes 22,628 sentences">198K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Old Church Slavonic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Old Church Slavonic treebanks</h3>
 
     <!-- start of Old Church Slavonic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Church Slavonic / PROIEL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cu">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PROIEL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="198,843 tokens 198,843 words 198,843 nodes 22,628 sentences">198K</span></span>
@@ -10994,8 +10020,8 @@ <h3>Old Church Slavonic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006871"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Old Church Slavonic (OCS) UD treebank is based on canonical Old Church Slavonic data from the PROIEL and TOROT treebanks.
 
@@ -11007,11 +10033,10 @@ <h3>Old Church Slavonic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Church Slavonic / PROIEL entry -->
-      
-    </div> <!-- end of Old Church Slavonic treebank list -->
+    </details>
+    
+    <!-- end of Old Church Slavonic treebank list -->
 
     
 
@@ -11021,35 +10046,29 @@ <h3> Language documentation </h3>
     See the <a href="cu/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Church Slavonic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Church Slavonic accordion row -->
 
   <!-- start of Old East Slavic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-IVAN.svg" /></span>
-    <span class="doublewidespan">Old East Slavic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="580,154 tokens 580,154 words 580,154 nodes 41,092 sentences">580K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Old East Slavic accordion row -->
-
-  <!-- start of Old East Slavic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-orv">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-IVAN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old East Slavic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="580,154 tokens 580,154 words 580,154 nodes 41,092 sentences">580K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Old East Slavic treebanks</h3>
 
     <!-- start of Old East Slavic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old East Slavic / RNC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-orv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">RNC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="168,064 tokens 168,064 words 168,064 nodes 6,047 sentences">168K</span></span>
@@ -11058,8 +10077,8 @@ <h3>Old East Slavic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.008026"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         `UD_Old_East_Slavic-RNC` is a sample of the Middle Russian corpus (1300-1700), a part of the Russian National Corpus. The data were originally annotated according to the RNC and extended UD-Russian morphological schemas and UD 2.4 dependency schema.
 
@@ -11071,12 +10090,11 @@ <h3>Old East Slavic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old East Slavic / RNC entry -->
-      
-      <!-- start of Old East Slavic / Ruthenian entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-orv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Ruthenian</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="137,333 tokens 137,333 words 137,333 nodes 5,365 sentences">137K</span></span>
@@ -11085,8 +10103,8 @@ <h3>Old East Slavic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007918"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Ruthenian UD treebank includes texts written in the territories of modern Belarus, Lithuania, Ukraine, and Poland in ca. 1300-1700. A sample of legal and nonfiction texts is drawn from the Ruthenian Corpus.
 
@@ -11098,12 +10116,11 @@ <h3>Old East Slavic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old East Slavic / Ruthenian entry -->
-      
-      <!-- start of Old East Slavic / TOROT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-orv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TOROT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="246,850 tokens 246,850 words 246,850 nodes 26,496 sentences">246K</span></span>
@@ -11112,8 +10129,8 @@ <h3>Old East Slavic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007096"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD\_Old\_East\_Slavic-TOROT is a conversion of a selection of Old East Slavonic and Middle Russian data from the Tromsø Old Russian and OCS Treebank (TOROT), which was originally annotated in PROIEL dependency format.
 
@@ -11125,12 +10142,11 @@ <h3>Old East Slavic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old East Slavic / TOROT entry -->
-      
-      <!-- start of Old East Slavic / Birchbark entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-orv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Birchbark</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="27,907 tokens 27,907 words 27,907 nodes 3,184 sentences">27K</span></span>
@@ -11139,8 +10155,8 @@ <h3>Old East Slavic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006061"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Old\_East\_Slavic-Birchbark is based on the RNC Corpus of Birchbark Letters and includes
 documents written in 1025-1500 in an East Slavic vernacular (letters, household and business records,
@@ -11156,11 +10172,10 @@ <h3>Old East Slavic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old East Slavic / Birchbark entry -->
-      
-    </div> <!-- end of Old East Slavic treebank list -->
+    </details>
+    
+    <!-- end of Old East Slavic treebank list -->
 
     
     See <a href="treebanks/orv-comparison.html">here</a> for comparative statistics of Old East Slavic treebanks.
@@ -11172,35 +10187,29 @@ <h3> Language documentation </h3>
     See the <a href="orv/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old East Slavic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old East Slavic accordion row -->
 
   <!-- start of Old English accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GB-ENG.svg" /></span>
-    <span class="doublewidespan">Old English</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="171 tokens 171 words 171 nodes 20 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Old English accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ang">
+      <span class="flagspan"><img class="flag" src="flags/svg/GB-ENG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old English</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="171 tokens 171 words 171 nodes 20 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Old English accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Old English treebanks</h3>
 
     <!-- start of Old English treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old English / Cairo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ang">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Cairo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="171 tokens 171 words 171 nodes 20 sentences">&lt;1K</span></span>
@@ -11209,8 +10218,8 @@ <h3>Old English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.395184"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Old English [Cairo](https://github.com/UniversalDependencies/cairo) sentences with UD and additional annotations
 
@@ -11222,11 +10231,10 @@ <h3>Old English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old English / Cairo entry -->
-      
-    </div> <!-- end of Old English treebank list -->
+    </details>
+    
+    <!-- end of Old English treebank list -->
 
     
 
@@ -11236,35 +10244,29 @@ <h3> Language documentation </h3>
     See the <a href="ang/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old English accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old English accordion row -->
 
   <!-- start of Old French accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR-ROYAL.svg" /></span>
-    <span class="doublewidespan">Old French</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="252,826 tokens 255,620 words 255,620 nodes 20,903 sentences">255K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction poetry"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Old French accordion row -->
-
-  <!-- start of Old French accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-fro">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR-ROYAL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old French</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="252,826 tokens 255,620 words 255,620 nodes 20,903 sentences">255K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction poetry"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Old French treebanks</h3>
 
     <!-- start of Old French treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old French / ALTM entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ALTM</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="15,076 tokens 15,285 words 15,285 nodes 553 sentences">15K</span></span>
@@ -11273,8 +10275,8 @@ <h3>Old French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.571840"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Old-French ALTM (AUTOMATED Legal Texts Medieval) is a treebank of medieval legal French from Normandy.
 Currently in contains one text, _Atiremens et jugiés d&#39;eschequiers_, dated 1314.
@@ -11287,12 +10289,11 @@ <h3>Old French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old French / ALTM entry -->
-      
-      <!-- start of Old French / PROFITEROLE entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PROFITEROLE</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="237,750 tokens 240,335 words 240,335 nodes 20,350 sentences">240K</span></span>
@@ -11301,8 +10302,8 @@ <h3>Old French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal nonfiction poetry"><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.507999"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Old_French-PROFITEROLE is an expansion of the previous UD_Old_French-SRCMF (which was a
 conversion of (part of) the SRCMF corpus (Syntactic Reference Corpus of Medieval French
@@ -11316,11 +10317,10 @@ <h3>Old French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old French / PROFITEROLE entry -->
-      
-    </div> <!-- end of Old French treebank list -->
+    </details>
+    
+    <!-- end of Old French treebank list -->
 
     
     See <a href="treebanks/fro-comparison.html">here</a> for comparative statistics of Old French treebanks.
@@ -11332,35 +10332,29 @@ <h3> Language documentation </h3>
     See the <a href="fro/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old French accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old French accordion row -->
 
   <!-- start of Old Georgian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" /></span>
-    <span class="doublewidespan">Old Georgian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6,575 tokens 6,884 words 6,884 nodes 151 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Kartvelian</span>
-  </div>
-  <!-- end of Old Georgian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-oge">
+      <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Georgian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6,575 tokens 6,884 words 6,884 nodes 151 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Kartvelian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Old Georgian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Old Georgian treebanks</h3>
 
     <!-- start of Old Georgian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Georgian / GLC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-oge">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GLC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,575 tokens 6,884 words 6,884 nodes 151 sentences">6K</span></span>
@@ -11369,8 +10363,8 @@ <h3>Old Georgian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.312523"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Old Georgian UD Treebank (UD_Old_Georgian-GLC) is the first syntactically annotated corpus of Georgian, based on a collection of annotated sentences selected from the Old Georgian Language Corpus (OGLC) available at https://oge.iliauni.edu.ge/.
 
@@ -11382,11 +10376,10 @@ <h3>Old Georgian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Georgian / GLC entry -->
-      
-    </div> <!-- end of Old Georgian treebank list -->
+    </details>
+    
+    <!-- end of Old Georgian treebank list -->
 
     
 
@@ -11396,35 +10389,29 @@ <h3> Language documentation </h3>
     See the <a href="oge/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Georgian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Georgian accordion row -->
 
   <!-- start of Old Irish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IE-FOUR.svg" /></span>
-    <span class="doublewidespan">Old Irish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="856 tokens 856 words 856 nodes 98 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic bible grammar-examples nonfiction poetry"><i class="fa fa-graduation-cap"></i><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
-    <span class="triplewidespan">IE, Celtic</span>
-  </div>
-  <!-- end of Old Irish accordion row -->
-
-  <!-- start of Old Irish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sga">
+      <span class="flagspan"><img class="flag" src="flags/svg/IE-FOUR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Irish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="856 tokens 856 words 856 nodes 98 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic bible grammar-examples nonfiction poetry"><i class="fa fa-graduation-cap"></i><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
+      <span class="triplewidespan">IE, Celtic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Old Irish treebanks</h3>
 
     <!-- start of Old Irish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Irish / DipWBG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sga">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DipWBG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="438 tokens 438 words 438 nodes 34 sentences">&lt;1K</span></span>
@@ -11433,8 +10420,8 @@ <h3>Old Irish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible grammar-examples nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003719"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies treebank for the Old Irish Würzburg glosses.
 
@@ -11446,12 +10433,11 @@ <h3>Old Irish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Irish / DipWBG entry -->
-      
-      <!-- start of Old Irish / DipSGG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sga">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DipSGG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="418 tokens 418 words 418 nodes 64 sentences">&lt;1K</span></span>
@@ -11460,8 +10446,8 @@ <h3>Old Irish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic grammar-examples nonfiction poetry"><i class="fa fa-graduation-cap"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003038"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies treebank for the Old Irish glosses of St. Gall.
 
@@ -11473,11 +10459,10 @@ <h3>Old Irish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Irish / DipSGG entry -->
-      
-    </div> <!-- end of Old Irish treebank list -->
+    </details>
+    
+    <!-- end of Old Irish treebank list -->
 
     
     See <a href="treebanks/sga-comparison.html">here</a> for comparative statistics of Old Irish treebanks.
@@ -11489,35 +10474,29 @@ <h3> Language documentation </h3>
     See the <a href="sga/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Irish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Irish accordion row -->
 
   <!-- start of Old Occitan accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR-OCC.svg" /></span>
-    <span class="doublewidespan">Old Occitan</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="51,028 tokens 52,539 words 52,539 nodes 1,486 sentences">52K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Old Occitan accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-pro">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR-OCC.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Occitan</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="51,028 tokens 52,539 words 52,539 nodes 1,486 sentences">52K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Old Occitan accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Old Occitan treebanks</h3>
 
     <!-- start of Old Occitan treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Occitan / CorAG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CorAG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="51,028 tokens 52,539 words 52,539 nodes 1,486 sentences">52K</span></span>
@@ -11526,8 +10505,8 @@ <h3>Old Occitan treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.464245"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Old_Occitan-CorAG (Corpus de l&#39;Ancien Gascon) is a corpus of medieval and early modern legal texts in Gascon, a variety of Old Occitan. The texts were digitized from existing editions and subsequently manually annotated in Universal Dependencies (PoS, functions and some morphological features).
 
@@ -11539,11 +10518,10 @@ <h3>Old Occitan treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Occitan / CorAG entry -->
-      
-    </div> <!-- end of Old Occitan treebank list -->
+    </details>
+    
+    <!-- end of Old Occitan treebank list -->
 
     
 
@@ -11553,35 +10531,29 @@ <h3> Language documentation </h3>
     See the <a href="pro/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Occitan accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Occitan accordion row -->
 
   <!-- start of Old Turkish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TURKIC.svg" /></span>
-    <span class="doublewidespan">Old Turkish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="158 tokens 158 words 158 nodes 20 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Turkic, Northeastern</span>
-  </div>
-  <!-- end of Old Turkish accordion row -->
-
-  <!-- start of Old Turkish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-otk">
+      <span class="flagspan"><img class="flag" src="flags/svg/TURKIC.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Turkish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="158 tokens 158 words 158 nodes 20 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Turkic, Northeastern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Old Turkish treebanks</h3>
 
     <!-- start of Old Turkish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Turkish / Clausal entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-otk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Clausal</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="158 tokens 158 words 158 nodes 20 sentences">&lt;1K</span></span>
@@ -11590,8 +10562,8 @@ <h3>Old Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC0 1.0"><img class="license" src="logos/cc-zero.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.151160"><img src="/img/stars10.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This repository contains an [Old Turkish](https://iso639-3.sil.org/code/otk) treebank built upon Old Turkic script texts.
 
@@ -11603,11 +10575,10 @@ <h3>Old Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Turkish / Clausal entry -->
-      
-    </div> <!-- end of Old Turkish treebank list -->
+    </details>
+    
+    <!-- end of Old Turkish treebank list -->
 
     
 
@@ -11617,35 +10588,29 @@ <h3> Language documentation </h3>
     See the <a href="otk/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Turkish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Turkish accordion row -->
 
   <!-- start of Ottoman Turkish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" /></span>
-    <span class="doublewidespan">Ottoman Turkish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="31,291 tokens 31,807 words 31,807 nodes 2,908 sentences">31K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples news nonfiction poetry"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
-    <span class="triplewidespan">Turkic, Southwestern</span>
-  </div>
-  <!-- end of Ottoman Turkish accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ota">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Ottoman Turkish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="31,291 tokens 31,807 words 31,807 nodes 2,908 sentences">31K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples news nonfiction poetry"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
+      <span class="triplewidespan">Turkic, Southwestern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Ottoman Turkish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Ottoman Turkish treebanks</h3>
 
     <!-- start of Ottoman Turkish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Ottoman Turkish / DUDU entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ota">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DUDU</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="21,549 tokens 22,027 words 22,027 nodes 2,246 sentences">22K</span></span>
@@ -11654,8 +10619,8 @@ <h3>Ottoman Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction news nonfiction poetry"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.653639"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         An Ottoman Turkish dependency treebank annotated in UD style. Created by Enes Yılandiloğlu.
 
@@ -11667,12 +10632,11 @@ <h3>Ottoman Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ottoman Turkish / DUDU entry -->
-      
-      <!-- start of Ottoman Turkish / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ota">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="908 tokens 929 words 929 nodes 148 sentences">&lt;1K</span></span>
@@ -11681,8 +10645,8 @@ <h3>Ottoman Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.404723"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Ottoman Turkish-TueCL treebank is part of a parallel Universal Dependencies corpus containing 148 sentences across five Turkic languages (Turkish, Azerbaijani, Kyrgyz, Uzbek, and Ottoman Turkish), designed to facilitate cross-linguistic research on these related languages.
 
@@ -11694,12 +10658,11 @@ <h3>Ottoman Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ottoman Turkish / TueCL entry -->
-      
-      <!-- start of Ottoman Turkish / BOUN entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ota">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BOUN</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="8,834 tokens 8,851 words 8,851 nodes 514 sentences">8K</span></span>
@@ -11708,8 +10671,8 @@ <h3>Ottoman Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003396"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         An Ottoman Turkish dependency treebank annotated in UD style. Created by [Şaziye Betül Özateş](https://sb-b.github.io/), Tarık Emre Tıraş, Efe Eren Genç from Boğaziçi University, and Esma Fatıma Bilgin Taşdemir from Medeniyet University.
 
@@ -11721,11 +10684,10 @@ <h3>Ottoman Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ottoman Turkish / BOUN entry -->
-      
-    </div> <!-- end of Ottoman Turkish treebank list -->
+    </details>
+    
+    <!-- end of Ottoman Turkish treebank list -->
 
     
     See <a href="treebanks/ota-comparison.html">here</a> for comparative statistics of Ottoman Turkish treebanks.
@@ -11737,35 +10699,29 @@ <h3> Language documentation </h3>
     See the <a href="ota/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Ottoman Turkish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Ottoman Turkish accordion row -->
 
   <!-- start of Pashto accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AF.svg" /></span>
-    <span class="doublewidespan">Pashto</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6,601 tokens 6,647 words 6,647 nodes 264 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction government grammar-examples nonfiction"><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Pashto accordion row -->
-
-  <!-- start of Pashto accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ps">
+      <span class="flagspan"><img class="flag" src="flags/svg/AF.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Pashto</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6,601 tokens 6,647 words 6,647 nodes 264 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction government grammar-examples nonfiction"><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Pashto treebanks</h3>
 
     <!-- start of Pashto treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Pashto / Sikaram entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ps">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Sikaram</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,421 tokens 5,467 words 5,467 nodes 200 sentences">5K</span></span>
@@ -11774,8 +10730,8 @@ <h3>Pashto treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples nonfiction"><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.530063"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Pashto-Sikaram treebank is a native UD treebank with manually annotated texts from various sources.
 
@@ -11787,12 +10743,11 @@ <h3>Pashto treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Pashto / Sikaram entry -->
-      
-      <!-- start of Pashto / Prince entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ps">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Prince</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,180 tokens 1,180 words 1,180 nodes 64 sentences">1K</span></span>
@@ -11801,8 +10756,8 @@ <h3>Pashto treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction government"><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.361212"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Pashto-Prince treebank contains manually annotated Pashto sentences from two textual sources: 50 sentences from Le Petit Prince, which was then translated and adapted into Northern Pashto, and 14 sentences from a Pashto prose text on Pashtun leadership. All sentences are annotated natively according to Universal Dependencies guidelines.
 
@@ -11814,11 +10769,10 @@ <h3>Pashto treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Pashto / Prince entry -->
-      
-    </div> <!-- end of Pashto treebank list -->
+    </details>
+    
+    <!-- end of Pashto treebank list -->
 
     
     See <a href="treebanks/ps-comparison.html">here</a> for comparative statistics of Pashto treebanks.
@@ -11830,35 +10784,29 @@ <h3> Language documentation </h3>
     See the <a href="ps/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Pashto accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Pashto accordion row -->
 
   <!-- start of Paumari accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Paumari</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="504 tokens 504 words 504 nodes 101 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Arawan</span>
-  </div>
-  <!-- end of Paumari accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-pad">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Paumari</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="504 tokens 504 words 504 nodes 101 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Arawan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Paumari accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Paumari treebanks</h3>
 
     <!-- start of Paumari treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Paumari / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pad">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="504 tokens 504 words 504 nodes 101 sentences">&lt;1K</span></span>
@@ -11867,8 +10815,8 @@ <h3>Paumari treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.001662"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a small treebank of Paumari, a low-resource Amazonian language.
 
@@ -11880,11 +10828,10 @@ <h3>Paumari treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Paumari / TueCL entry -->
-      
-    </div> <!-- end of Paumari treebank list -->
+    </details>
+    
+    <!-- end of Paumari treebank list -->
 
     
 
@@ -11894,35 +10841,29 @@ <h3> Language documentation </h3>
     See the <a href="pad/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Paumari accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Paumari accordion row -->
 
   <!-- start of Persian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" /></span>
-    <span class="doublewidespan">Persian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="645,790 tokens 654,699 words 654,699 nodes 35,104 sentences">654K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction legal medical news nonfiction social spoken web"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Persian accordion row -->
-
-  <!-- start of Persian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-fa">
+      <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Persian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="645,790 tokens 654,699 words 654,699 nodes 35,104 sentences">654K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction legal medical news nonfiction social spoken web"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Persian treebanks</h3>
 
     <!-- start of Persian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Persian / PerDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PerDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="494,163 tokens 501,776 words 501,776 nodes 29,107 sentences">501K</span></span>
@@ -11931,8 +10872,8 @@ <h3>Persian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction news nonfiction web"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.008092"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Persian Universal Dependency Treebank (PerUDT) is the result of automatic coversion of Persian Dependency Treebank (PerDT) with extensive manual corrections. Please refer to the follwoing work, if you use this data:
 *  Mohammad Sadegh Rasooli, Pegah Safari, Amirsaeid Moloodi, and Alireza Nourian. &#34;The Persian Dependency Treebank Made Universal&#34;. 2020 (to appear).
@@ -11945,12 +10886,11 @@ <h3>Persian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Persian / PerDT entry -->
-      
-      <!-- start of Persian / Seraji entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-fa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Seraji</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="151,627 tokens 152,923 words 152,923 nodes 5,997 sentences">152K</span></span>
@@ -11959,8 +10899,8 @@ <h3>Persian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction legal medical news nonfiction social spoken"><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007747"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Persian Universal Dependency Treebank (Seraji) is based on Uppsala Persian Dependency Treebank (UPDT).
 The conversion of the UPDT to the Universal Dependencies was performed semi-automatically with extensive manual checks and corrections.
@@ -11973,11 +10913,10 @@ <h3>Persian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Persian / Seraji entry -->
-      
-    </div> <!-- end of Persian treebank list -->
+    </details>
+    
+    <!-- end of Persian treebank list -->
 
     
     See <a href="treebanks/fa-comparison.html">here</a> for comparative statistics of Persian treebanks.
@@ -11989,35 +10928,29 @@ <h3> Language documentation </h3>
     See the <a href="fa/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Persian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Persian accordion row -->
 
   <!-- start of Pesh accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/HN.svg" /></span>
-    <span class="doublewidespan">Pesh</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4,275 tokens 4,275 words 4,275 nodes 524 sentences">4K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Chibchan, Pesh</span>
-  </div>
-  <!-- end of Pesh accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-pay">
+      <span class="flagspan"><img class="flag" src="flags/svg/HN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Pesh</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4,275 tokens 4,275 words 4,275 nodes 524 sentences">4K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Chibchan, Pesh</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Pesh accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Pesh treebanks</h3>
 
     <!-- start of Pesh treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Pesh / ChibErgIS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pay">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ChibErgIS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4,275 tokens 4,275 words 4,275 nodes 524 sentences">4K</span></span>
@@ -12026,8 +10959,8 @@ <h3>Pesh treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003074"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for Pesh (aka Paya), a member of the Chibchan language family. The language is spoken by about 500 speakers in Honduras.
 
@@ -12039,11 +10972,10 @@ <h3>Pesh treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Pesh / ChibErgIS entry -->
-      
-    </div> <!-- end of Pesh treebank list -->
+    </details>
+    
+    <!-- end of Pesh treebank list -->
 
     
 
@@ -12053,35 +10985,29 @@ <h3> Language documentation </h3>
     See the <a href="pay/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Pesh accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Pesh accordion row -->
 
   <!-- start of Phrygian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" /></span>
-    <span class="doublewidespan">Phrygian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,915 tokens 1,921 words 1,921 nodes 203 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Greek</span>
-  </div>
-  <!-- end of Phrygian accordion row -->
-
-  <!-- start of Phrygian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-xpg">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Phrygian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,915 tokens 1,921 words 1,921 nodes 203 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Greek</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Phrygian treebanks</h3>
 
     <!-- start of Phrygian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Phrygian / KUL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-xpg">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KUL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,915 tokens 1,921 words 1,921 nodes 203 sentences">1K</span></span>
@@ -12090,8 +11016,8 @@ <h3>Phrygian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.446792"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Phrygian-KUL started as part of a Master&#39;s thesis in linguistics at KU Leuven, annotating the New Phrygian subcorpus of the ancient Phrygian language. It has since expanded to include Old and Middle Phrygian texts.
 
@@ -12103,11 +11029,10 @@ <h3>Phrygian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Phrygian / KUL entry -->
-      
-    </div> <!-- end of Phrygian treebank list -->
+    </details>
+    
+    <!-- end of Phrygian treebank list -->
 
     
 
@@ -12117,35 +11042,29 @@ <h3> Language documentation </h3>
     See the <a href="xpg/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Phrygian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Phrygian accordion row -->
 
   <!-- start of Polish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PL.svg" /></span>
-    <span class="doublewidespan">Polish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="543,289 tokens 546,602 words 546,602 nodes 42,416 sentences">546K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction legal news nonfiction social spoken"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Polish accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-pl">
+      <span class="flagspan"><img class="flag" src="flags/svg/PL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Polish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="543,289 tokens 546,602 words 546,602 nodes 42,416 sentences">546K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction legal news nonfiction social spoken"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Polish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Polish treebanks</h3>
 
     <!-- start of Polish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Polish / PDB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PDB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="347,319 tokens 349,978 words 349,978 nodes 22,152 sentences">349K</span></span>
@@ -12154,8 +11073,8 @@ <h3>Polish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.752618"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Polish PDB-UD treebank is automatically converted from the Polish Dependency Bank 2.0 (PDB 2.0). Both treebanks were created at the [Institute of Computer Science, Polish Academy of Sciences](https://ipipan.waw.pl/en/) in Warsaw (Poland).
 
@@ -12167,12 +11086,11 @@ <h3>Polish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Polish / PDB entry -->
-      
-      <!-- start of Polish / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="18,333 tokens 18,384 words 18,384 nodes 1,000 sentences">18K</span></span>
@@ -12181,8 +11099,8 @@ <h3>Polish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.521916"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is the Polish portion of the Parallel Universal Dependencies (PUD) treebanks, created at the [Institute of Computer Science, Polish Academy of Sciences](https://ipipan.waw.pl/en/) in Warsaw (Poland).
 
@@ -12194,12 +11112,11 @@ <h3>Polish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Polish / PUD entry -->
-      
-      <!-- start of Polish / LFG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LFG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="130,967 tokens 130,967 words 130,967 nodes 17,246 sentences">130K</span></span>
@@ -12208,8 +11125,8 @@ <h3>Polish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction social spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="GNU GPL 3.0"><img class="license" src="logos/gpl.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006898"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The LFG Enhanced UD treebank of Polish is based on a corpus of LFG (Lexical Functional Grammar) syntactic structures generated by an LFG grammar of Polish, POLFIE, and manually disambiguated by human annotators.
 
@@ -12221,12 +11138,11 @@ <h3>Polish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Polish / LFG entry -->
-      
-      <!-- start of Polish / MPDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MPDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="46,670 tokens 47,273 words 47,273 nodes 2,018 sentences">47K</span></span>
@@ -12235,8 +11151,8 @@ <h3>Polish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction legal nonfiction"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006468"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Polish-MPDT is a treebank of Middle Polish (17th–18th centuries). It is a rule-based conversion of the [Middle Polish Dependency Treebank](https://korba.edu.pl/treebank?lang=en) (Wieczorek, 2025) from its original annotation to the Universal Dependencies format. The MPDT sentences are sourced from the [KorBa corpus](https://korba.edu.pl/overview?lang=en) (Gruszczyński et al., 2022).
 
@@ -12248,11 +11164,10 @@ <h3>Polish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Polish / MPDT entry -->
-      
-    </div> <!-- end of Polish treebank list -->
+    </details>
+    
+    <!-- end of Polish treebank list -->
 
     
     See <a href="treebanks/pl-comparison.html">here</a> for comparative statistics of Polish treebanks.
@@ -12264,35 +11179,29 @@ <h3> Language documentation </h3>
     See the <a href="pl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Polish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Polish accordion row -->
 
   <!-- start of Pomak accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TAMRASH.svg" /></span>
-    <span class="doublewidespan">Pomak</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="34,348 tokens 34,348 words 34,348 nodes 2,250 sentences">34K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news poetry"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-music"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Pomak accordion row -->
-
-  <!-- start of Pomak accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-qpm">
+      <span class="flagspan"><img class="flag" src="flags/svg/TAMRASH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Pomak</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="34,348 tokens 34,348 words 34,348 nodes 2,250 sentences">34K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news poetry"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-music"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Pomak treebanks</h3>
 
     <!-- start of Pomak treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Pomak / Philotis entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-qpm">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Philotis</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="34,348 tokens 34,348 words 34,348 nodes 2,250 sentences">34K</span></span>
@@ -12301,8 +11210,8 @@ <h3>Pomak treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news poetry"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004379"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Pomak UD treebank  is derived from the Pomak Dependency Treebank,
 a resource developed and maintained by researchers at the Institute for Language and Speech Processing/Athena
@@ -12316,11 +11225,10 @@ <h3>Pomak treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Pomak / Philotis entry -->
-      
-    </div> <!-- end of Pomak treebank list -->
+    </details>
+    
+    <!-- end of Pomak treebank list -->
 
     
 
@@ -12330,35 +11238,29 @@ <h3> Language documentation </h3>
     See the <a href="qpm/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Pomak accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Pomak accordion row -->
 
   <!-- start of Portuguese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PT.svg" /></span>
-    <span class="doublewidespan">Portuguese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="7 treebanks">7</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,438,434 tokens 1,545,443 words 1,545,506 nodes 82,183 sentences">1,545K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction grammar-examples news nonfiction social wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Portuguese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-pt">
+      <span class="flagspan"><img class="flag" src="flags/svg/PT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Portuguese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="7 treebanks">7</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,438,434 tokens 1,545,443 words 1,545,506 nodes 82,183 sentences">1,545K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic blog fiction grammar-examples news nonfiction social wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Portuguese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Portuguese treebanks</h3>
 
     <!-- start of Portuguese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Portuguese / Porttinari entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Porttinari</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="157,490 tokens 168,080 words 168,143 nodes 8,418 sentences">168K</span></span>
@@ -12367,8 +11269,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.780898"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Porttinari-base [(Duran et al., 2023)](https://sol.sbc.org.br/index.php/stil/article/view/25443/25264) is the journalistic portion of Porttinari (which stands for “PORTuguese Treebank”), which shall be a large multigenre treebank for Portuguese [(Pardo et al., 2021)](https://sol.sbc.org.br/index.php/stil/article/view/17778/17612), following the &#34;Universal Dependencies&#34; international grammar framework [(de Marneffe et al., 2021)](https://aclanthology.org/2021.cl-2.11/).
 
@@ -12380,12 +11282,11 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / Porttinari entry -->
-      
-      <!-- start of Portuguese / DANTEStocks entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DANTEStocks</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="77,576 tokens 80,998 words 80,998 nodes 4,042 sentences">80K</span></span>
@@ -12394,8 +11295,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.692208"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         DANTEStocks (Di Felippo et al., 2024) is a collection of Brazilian Portuguese tweets on the stock market domain that is part of Porttinari (“PORTuguese Treebank”), which shall be a large multigenre treebank for Portuguese (Pardo et al., 2021), following the &#34;Universal Dependencies&#34; framework (de Marneffe et al., 2021).
 
@@ -12407,12 +11308,11 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / DANTEStocks entry -->
-      
-      <!-- start of Portuguese / PetroGold entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PetroGold</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="232,333 tokens 250,605 words 250,605 nodes 8,946 sentences">250K</span></span>
@@ -12421,8 +11321,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic"><i class="fa fa-graduation-cap"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007963"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Portuguese-PetroGold is a fully revised treebank which consists of academic texts from the oil &amp; gas domain in Brazilian Portuguese.
 
@@ -12434,12 +11334,11 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / PetroGold entry -->
-      
-      <!-- start of Portuguese / Bosque entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Bosque</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="210,958 tokens 227,827 words 227,827 nodes 9,357 sentences">227K</span></span>
@@ -12448,8 +11347,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007659"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies (UD) Portuguese treebank is based on the
 Constraint Grammar converted version of the Bosque, which is part of
@@ -12464,12 +11363,11 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / Bosque entry -->
-      
-      <!-- start of Portuguese / CINTIL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CINTIL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="441,991 tokens 475,860 words 475,860 nodes 38,400 sentences">475K</span></span>
@@ -12478,8 +11376,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-ND 4.0"><img class="license" src="logos/by-nc-nd.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007408"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         CINTIL-UDep is a dependency bank of Portuguese that is treebanked with Universal Dependencies.
 It contains over 38K annotated sentences (and 476K tokens), of mostly newspaper text.
@@ -12492,12 +11390,11 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / CINTIL entry -->
-      
-      <!-- start of Portuguese / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="296,169 tokens 318,666 words 318,666 nodes 12,020 sentences">318K</span></span>
@@ -12506,8 +11403,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005657"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Brazilian Portuguese UD is converted from the [Google Universal Dependency
 Treebank v2.0 (legacy)](https://github.com/ryanmcd/uni-dep-tb).
@@ -12520,12 +11417,11 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / GSD entry -->
-      
-      <!-- start of Portuguese / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="21,917 tokens 23,407 words 23,407 nodes 1,000 sentences">23K</span></span>
@@ -12534,8 +11430,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004595"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -12549,11 +11445,10 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / PUD entry -->
-      
-    </div> <!-- end of Portuguese treebank list -->
+    </details>
+    
+    <!-- end of Portuguese treebank list -->
 
     
     See <a href="treebanks/pt-comparison.html">here</a> for comparative statistics of Portuguese treebanks.
@@ -12565,35 +11460,29 @@ <h3> Language documentation </h3>
     See the <a href="pt/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Portuguese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Portuguese accordion row -->
 
   <!-- start of Punjabi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Punjabi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,810 tokens 3,810 words 3,810 nodes 250 sentences">3K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Punjabi accordion row -->
-
-  <!-- start of Punjabi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-pa">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Punjabi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,810 tokens 3,810 words 3,810 nodes 250 sentences">3K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Punjabi treebanks</h3>
 
     <!-- start of Punjabi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Punjabi / CS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,903 tokens 1,903 words 1,903 nodes 113 sentences">1K</span></span>
@@ -12602,8 +11491,8 @@ <h3>Punjabi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.448928"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD_Punjabi_CS is a manually annotated treebank in Punjabi (also called Eastern Punjabi, Gurmukhi script) language. The Indo-Aryan language is prominently spoken in Punjab region of India and Pakistan with strong diasporas in Western countries like Canada, UK and USA etc. It is written from Left-to-Right with Subject-Object-Verb (SOV) word ordering.
 
@@ -12615,12 +11504,11 @@ <h3>Punjabi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Punjabi / CS entry -->
-      
-      <!-- start of Punjabi / Rang entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-pa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Rang</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,907 tokens 1,907 words 1,907 nodes 137 sentences">1K</span></span>
@@ -12629,8 +11517,8 @@ <h3>Punjabi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.387479"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Punjabi-Rang treebank is a manually annotated corpus in Punjabi (Shahmukhi script).
 
@@ -12642,11 +11530,10 @@ <h3>Punjabi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Punjabi / Rang entry -->
-      
-    </div> <!-- end of Punjabi treebank list -->
+    </details>
+    
+    <!-- end of Punjabi treebank list -->
 
     
     See <a href="treebanks/pa-comparison.html">here</a> for comparative statistics of Punjabi treebanks.
@@ -12658,35 +11545,29 @@ <h3> Language documentation </h3>
     See the <a href="pa/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Punjabi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Punjabi accordion row -->
 
   <!-- start of Romanian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RO.svg" /></span>
-    <span class="doublewidespan">Romanian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="942,149 tokens 942,151 words 942,151 nodes 40,720 sentences">942K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic bible fiction grammar-examples legal medical news nonfiction poetry social wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Romanian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ro">
+      <span class="flagspan"><img class="flag" src="flags/svg/RO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Romanian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6 treebanks">6</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="942,149 tokens 942,151 words 942,151 nodes 40,720 sentences">942K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic bible fiction grammar-examples legal medical news nonfiction poetry social wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Romanian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Romanian treebanks</h3>
 
     <!-- start of Romanian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Romanian / ArT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ArT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="573 tokens 573 words 573 nodes 50 sentences">&lt;1K</span></span>
@@ -12695,8 +11576,8 @@ <h3>Romanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.401720"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD treebank ArT is a treebank of the Aromanian dialect of the Romanian language in UD format.
 
@@ -12708,12 +11589,11 @@ <h3>Romanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Romanian / ArT entry -->
-      
-      <!-- start of Romanian / MolDoRo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MolDoRo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="239 tokens 241 words 241 nodes 30 sentences">&lt;1K</span></span>
@@ -12722,8 +11602,8 @@ <h3>Romanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.260630"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A small treebank of sentences in Moldovan Romanian, using the Cyrillic writing system (as used in Moldova until 1989).
 
@@ -12735,12 +11615,11 @@ <h3>Romanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Romanian / MolDoRo entry -->
-      
-      <!-- start of Romanian / Nonstandard entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Nonstandard</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="572,436 tokens 572,436 words 572,436 nodes 26,225 sentences">572K</span></span>
@@ -12749,8 +11628,8 @@ <h3>Romanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible poetry"><i class="fa fa-cloud"></i><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007700"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Romanian Non-standard UD treebank (called UAIC-RoDia) is based on UAIC-RoDia Treebank. UAIC-RoDia = ISLRN 156-635-615-024-0
 
@@ -12762,12 +11641,11 @@ <h3>Romanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Romanian / Nonstandard entry -->
-      
-      <!-- start of Romanian / RRT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">RRT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="218,464 tokens 218,464 words 218,464 nodes 9,524 sentences">218K</span></span>
@@ -12776,8 +11654,8 @@ <h3>Romanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic fiction legal medical news nonfiction wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-eyedropper"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007498"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Romanian UD treebank (called RoRefTrees) (Barbu Mititelu et al., 2016) is the reference treebank in UD format for standard Romanian.
 
@@ -12789,12 +11667,11 @@ <h3>Romanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Romanian / RRT entry -->
-      
-      <!-- start of Romanian / SiMoNERo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SiMoNERo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="146,020 tokens 146,020 words 146,020 nodes 4,681 sentences">146K</span></span>
@@ -12803,8 +11680,8 @@ <h3>Romanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="medical"><i class="fa fa-eyedropper"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006834"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         SiMoNERo is a medical corpus of contemporary Romanian.
 
@@ -12816,12 +11693,11 @@ <h3>Romanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Romanian / SiMoNERo entry -->
-      
-      <!-- start of Romanian / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4,417 tokens 4,417 words 4,417 nodes 210 sentences">4K</span></span>
@@ -12830,8 +11706,8 @@ <h3>Romanian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005250"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Romanian Social Media Sexist Language UD Treebank is a reference treebank in Universal Dependencies (UD) format for Romanian sexist language. Currently small, it comprises a subset of tweets sourced from [CoRoSeOf](https://github.com/DianaHoefels/CoRoSeOf).
 
@@ -12843,11 +11719,10 @@ <h3>Romanian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Romanian / TueCL entry -->
-      
-    </div> <!-- end of Romanian treebank list -->
+    </details>
+    
+    <!-- end of Romanian treebank list -->
 
     
     See <a href="treebanks/ro-comparison.html">here</a> for comparative statistics of Romanian treebanks.
@@ -12859,35 +11734,29 @@ <h3> Language documentation </h3>
     See the <a href="ro/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Romanian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Romanian accordion row -->
 
   <!-- start of Russian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU.svg" /></span>
-    <span class="doublewidespan">Russian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="5 treebanks">5</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,455,957 tokens 3,455,957 words 3,458,161 nodes 220,419 sentences">3,455K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction poetry social wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Russian accordion row -->
-
-  <!-- start of Russian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ru">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Russian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="5 treebanks">5</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,455,957 tokens 3,455,957 words 3,458,161 nodes 220,419 sentences">3,455K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction poetry social wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Russian treebanks</h3>
 
     <!-- start of Russian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Russian / Taiga entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ru">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Taiga</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,758,937 tokens 1,758,937 words 1,758,937 nodes 121,967 sentences">1,758K</span></span>
@@ -12896,8 +11765,8 @@ <h3>Russian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog fiction news poetry social wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-music"></i><i class="fa fa-feed"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.009229"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Universal Dependencies treebank is based on data samples extracted from Taiga Corpus and MorphoRuEval-2017 and GramEval-2020 shared tasks collections.
 
@@ -12909,12 +11778,11 @@ <h3>Russian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Russian / Taiga entry -->
-      
-      <!-- start of Russian / SynTagRus entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ru">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SynTagRus</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,515,559 tokens 1,515,559 words 1,517,763 nodes 87,337 sentences">1,515K</span></span>
@@ -12923,8 +11791,8 @@ <h3>Russian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.008113"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Russian data from the SynTagRus corpus.
 
@@ -12936,12 +11804,11 @@ <h3>Russian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Russian / SynTagRus entry -->
-      
-      <!-- start of Russian / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ru">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="97,994 tokens 97,994 words 97,994 nodes 5,030 sentences">97K</span></span>
@@ -12950,8 +11817,8 @@ <h3>Russian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007580"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Russian Universal Dependencies Treebank annotated and converted by Google.
 
@@ -12963,12 +11830,11 @@ <h3>Russian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Russian / GSD entry -->
-      
-      <!-- start of Russian / Poetry entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ru">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Poetry</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="64,112 tokens 64,112 words 64,112 nodes 5,085 sentences">64K</span></span>
@@ -12977,8 +11843,8 @@ <h3>Russian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="poetry"><i class="fa fa-music"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007418"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Russian-Poetry contains samples of Russian poetry written in 19th – early 21th centuries. The treebank is based on the Poetry Corpus of the Russian National Corpus.
 
@@ -12990,12 +11856,11 @@ <h3>Russian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Russian / Poetry entry -->
-      
-      <!-- start of Russian / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ru">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,355 tokens 19,355 words 19,355 nodes 1,000 sentences">19K</span></span>
@@ -13004,8 +11869,8 @@ <h3>Russian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006228"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -13019,11 +11884,10 @@ <h3>Russian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Russian / PUD entry -->
-      
-    </div> <!-- end of Russian treebank list -->
+    </details>
+    
+    <!-- end of Russian treebank list -->
 
     
     See <a href="treebanks/ru-comparison.html">here</a> for comparative statistics of Russian treebanks.
@@ -13035,35 +11899,29 @@ <h3> Language documentation </h3>
     See the <a href="ru/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Russian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Russian accordion row -->
 
   <!-- start of Ruuli accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/UG.svg" /></span>
-    <span class="doublewidespan">Ruuli</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="5,860 tokens 6,301 words 6,301 nodes 1,234 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Niger-Congo, Bantoid</span>
-  </div>
-  <!-- end of Ruuli accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ruc">
+      <span class="flagspan"><img class="flag" src="flags/svg/UG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Ruuli</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="5,860 tokens 6,301 words 6,301 nodes 1,234 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Niger-Congo, Bantoid</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Ruuli accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Ruuli treebanks</h3>
 
     <!-- start of Ruuli treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Ruuli / RDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ruc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">RDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,860 tokens 6,301 words 6,301 nodes 1,234 sentences">6K</span></span>
@@ -13072,8 +11930,8 @@ <h3>Ruuli treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.478656"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Ruuli-RDT is a Universal Dependencies (UD) treebank for the Ruruuli-Lunyala (Ruuli) language. The annotation was converted from interlinear glossed text and manually annotated for syntactic relations. The treebank includes texts from various sources: conversations, oral folktales, biographic monologue, movie subtitles, grammar examples, and factual prose. The treebank contains approximately 6,000 tokens.
 
@@ -13085,11 +11943,10 @@ <h3>Ruuli treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ruuli / RDT entry -->
-      
-    </div> <!-- end of Ruuli treebank list -->
+    </details>
+    
+    <!-- end of Ruuli treebank list -->
 
     
 
@@ -13099,35 +11956,29 @@ <h3> Language documentation </h3>
     See the <a href="ruc/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Ruuli accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Ruuli accordion row -->
 
   <!-- start of Sanskrit accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Sanskrit</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="207,914 tokens 208,283 words 208,283 nodes 27,412 sentences">208K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Sanskrit accordion row -->
-
-  <!-- start of Sanskrit accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sa">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Sanskrit</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="207,914 tokens 208,283 words 208,283 nodes 27,412 sentences">208K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Sanskrit treebanks</h3>
 
     <!-- start of Sanskrit treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Sanskrit / UFAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UFAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,474 tokens 1,843 words 1,843 nodes 230 sentences">1K</span></span>
@@ -13136,8 +11987,8 @@ <h3>Sanskrit treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.453579"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A small Sanskrit treebank of sentences from Pañcatantra, an ancient Indian
 collection of interrelated fables by Vishnu Sharma.
@@ -13150,12 +12001,11 @@ <h3>Sanskrit treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sanskrit / UFAL entry -->
-      
-      <!-- start of Sanskrit / Vedic entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Vedic</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="206,440 tokens 206,440 words 206,440 nodes 27,182 sentences">206K</span></span>
@@ -13164,8 +12014,8 @@ <h3>Sanskrit treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006424"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Treebank of Vedic Sanskrit contains 4,000 sentences with 27,000 words chosen from metrical and prose passages of the Ṛgveda (RV), the Śaunaka recension of the Atharvaveda (ŚS), the Maitrāyaṇīsaṃhitā (MS), and the Aitareya- (AB) and Śatapatha-Brāhmaṇas (ŚB).
 
@@ -13180,11 +12030,10 @@ <h3>Sanskrit treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sanskrit / Vedic entry -->
-      
-    </div> <!-- end of Sanskrit treebank list -->
+    </details>
+    
+    <!-- end of Sanskrit treebank list -->
 
     
     See <a href="treebanks/sa-comparison.html">here</a> for comparative statistics of Sanskrit treebanks.
@@ -13196,35 +12045,29 @@ <h3> Language documentation </h3>
     See the <a href="sa/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Sanskrit accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Sanskrit accordion row -->
 
   <!-- start of Scottish Gaelic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GB-SCT.svg" /></span>
-    <span class="doublewidespan">Scottish Gaelic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="86,139 tokens 90,016 words 90,016 nodes 4,748 sentences">90K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Celtic</span>
-  </div>
-  <!-- end of Scottish Gaelic accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-gd">
+      <span class="flagspan"><img class="flag" src="flags/svg/GB-SCT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Scottish Gaelic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="86,139 tokens 90,016 words 90,016 nodes 4,748 sentences">90K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Celtic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Scottish Gaelic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Scottish Gaelic treebanks</h3>
 
     <!-- start of Scottish Gaelic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Scottish Gaelic / ARCOSG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-gd">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ARCOSG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="86,139 tokens 90,016 words 90,016 nodes 4,748 sentences">90K</span></span>
@@ -13233,8 +12076,8 @@ <h3>Scottish Gaelic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.683583"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A treebank of Scottish Gaelic based on the
 [Annotated Reference Corpus Of Scottish Gaelic (ARCOSG)](https://github.com/Gaelic-Algorithmic-Research-Group/ARCOSG).
@@ -13247,11 +12090,10 @@ <h3>Scottish Gaelic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Scottish Gaelic / ARCOSG entry -->
-      
-    </div> <!-- end of Scottish Gaelic treebank list -->
+    </details>
+    
+    <!-- end of Scottish Gaelic treebank list -->
 
     
 
@@ -13261,35 +12103,29 @@ <h3> Language documentation </h3>
     See the <a href="gd/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Scottish Gaelic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Scottish Gaelic accordion row -->
 
   <!-- start of Serbian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RS.svg" /></span>
-    <span class="doublewidespan">Serbian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="97,673 tokens 97,673 words 97,673 nodes 4,384 sentences">97K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Serbian accordion row -->
-
-  <!-- start of Serbian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sr">
+      <span class="flagspan"><img class="flag" src="flags/svg/RS.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Serbian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="97,673 tokens 97,673 words 97,673 nodes 4,384 sentences">97K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Serbian treebanks</h3>
 
     <!-- start of Serbian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Serbian / SET entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SET</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="97,673 tokens 97,673 words 97,673 nodes 4,384 sentences">97K</span></span>
@@ -13298,8 +12134,8 @@ <h3>Serbian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.713886"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Serbian UD treebank is based on the [SETimes-SR](http://hdl.handle.net/11356/1200) corpus and
 additional news documents from the Serbian web.
@@ -13312,11 +12148,10 @@ <h3>Serbian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Serbian / SET entry -->
-      
-    </div> <!-- end of Serbian treebank list -->
+    </details>
+    
+    <!-- end of Serbian treebank list -->
 
     
 
@@ -13326,35 +12161,29 @@ <h3> Language documentation </h3>
     See the <a href="sr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Serbian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Serbian accordion row -->
 
   <!-- start of Shanghainese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" /></span>
-    <span class="doublewidespan">Shanghainese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="8,584 tokens 8,584 words 8,584 nodes 983 sentences">8K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Sino-Tibetan, Chinese</span>
-  </div>
-  <!-- end of Shanghainese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-wuu">
+      <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Shanghainese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="8,584 tokens 8,584 words 8,584 nodes 983 sentences">8K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Sino-Tibetan, Chinese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Shanghainese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Shanghainese treebanks</h3>
 
     <!-- start of Shanghainese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Shanghainese / ShUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-wuu">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ShUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="8,584 tokens 8,584 words 8,584 nodes 983 sentences">8K</span></span>
@@ -13363,8 +12192,8 @@ <h3>Shanghainese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.431544"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         **UD Shanghainese-ShUD** is the first UD treebank for Shanghainese.
 
@@ -13376,11 +12205,10 @@ <h3>Shanghainese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Shanghainese / ShUD entry -->
-      
-    </div> <!-- end of Shanghainese treebank list -->
+    </details>
+    
+    <!-- end of Shanghainese treebank list -->
 
     
 
@@ -13390,35 +12218,29 @@ <h3> Language documentation </h3>
     See the <a href="wuu/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Shanghainese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Shanghainese accordion row -->
 
   <!-- start of Sicilian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IT-SIC.svg" /></span>
-    <span class="doublewidespan">Sicilian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="10,932 tokens 11,204 words 11,204 nodes 505 sentences">11K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Sicilian accordion row -->
-
-  <!-- start of Sicilian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-scn">
+      <span class="flagspan"><img class="flag" src="flags/svg/IT-SIC.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Sicilian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="10,932 tokens 11,204 words 11,204 nodes 505 sentences">11K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Sicilian treebanks</h3>
 
     <!-- start of Sicilian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Sicilian / STB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-scn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">STB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="10,932 tokens 11,204 words 11,204 nodes 505 sentences">11K</span></span>
@@ -13427,8 +12249,8 @@ <h3>Sicilian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.574265"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Sicilian Treebank is a small parallel corpus of Sicilian texts, automatically parsed and then manually revised, with Italian translations. It includes both contemporary and folkloric materials. The main focus is documenting typical morphosyntactic features of the written Sicilian.
 
@@ -13440,11 +12262,10 @@ <h3>Sicilian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sicilian / STB entry -->
-      
-    </div> <!-- end of Sicilian treebank list -->
+    </details>
+    
+    <!-- end of Sicilian treebank list -->
 
     
 
@@ -13454,35 +12275,29 @@ <h3> Language documentation </h3>
     See the <a href="scn/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Sicilian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Sicilian accordion row -->
 
   <!-- start of Sindhi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" /></span>
-    <span class="doublewidespan">Sindhi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="95,227 tokens 95,227 words 95,227 nodes 5,756 sentences">95K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Sindhi accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sd">
+      <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Sindhi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="95,227 tokens 95,227 words 95,227 nodes 5,756 sentences">95K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Sindhi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Sindhi treebanks</h3>
 
     <!-- start of Sindhi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Sindhi / Isra entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sd">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Isra</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="95,227 tokens 95,227 words 95,227 nodes 5,756 sentences">95K</span></span>
@@ -13491,8 +12306,8 @@ <h3>Sindhi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.713448"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A UD dataset for Sindhi, based on newswire (primarily Kawish), folk
 stories from the Adabi forums, handwritten text to demonstrate
@@ -13507,11 +12322,10 @@ <h3>Sindhi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sindhi / Isra entry -->
-      
-    </div> <!-- end of Sindhi treebank list -->
+    </details>
+    
+    <!-- end of Sindhi treebank list -->
 
     
 
@@ -13521,35 +12335,29 @@ <h3> Language documentation </h3>
     See the <a href="sd/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Sindhi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Sindhi accordion row -->
 
   <!-- start of Sinhala accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/LK.svg" /></span>
-    <span class="doublewidespan">Sinhala</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,549 tokens 1,549 words 1,549 nodes 169 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction government news nonfiction web"><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Sinhala accordion row -->
-
-  <!-- start of Sinhala accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-si">
+      <span class="flagspan"><img class="flag" src="flags/svg/LK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Sinhala</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,549 tokens 1,549 words 1,549 nodes 169 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction government news nonfiction web"><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Sinhala treebanks</h3>
 
     <!-- start of Sinhala treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Sinhala / Appuwa entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-si">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Appuwa</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="669 tokens 669 words 669 nodes 69 sentences">&lt;1K</span></span>
@@ -13558,8 +12366,8 @@ <h3>Sinhala treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.395714"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank contains a manually annotated Sinhala narrative based on the folk story &#34;Appuwa&#34;, created as part of a project on treebank development for understudied languages within the Universal Dependencies framework.
 
@@ -13571,12 +12379,11 @@ <h3>Sinhala treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sinhala / Appuwa entry -->
-      
-      <!-- start of Sinhala / STB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-si">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">STB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="880 tokens 880 words 880 nodes 100 sentences">&lt;1K</span></span>
@@ -13585,8 +12392,8 @@ <h3>Sinhala treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction government news nonfiction web"><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004109"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank consists contemporary written Sinhala text taken from a 10M corpus maintained by UCSC, Sri Lanka. The corpus contains novels, short stories, Sinhala translations, critiques and Sinhala newspapers.
 
@@ -13598,11 +12405,10 @@ <h3>Sinhala treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sinhala / STB entry -->
-      
-    </div> <!-- end of Sinhala treebank list -->
+    </details>
+    
+    <!-- end of Sinhala treebank list -->
 
     
     See <a href="treebanks/si-comparison.html">here</a> for comparative statistics of Sinhala treebanks.
@@ -13614,35 +12420,29 @@ <h3> Language documentation </h3>
     See the <a href="si/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Sinhala accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Sinhala accordion row -->
 
   <!-- start of Skolt Sami accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SAMI.svg" /></span>
-    <span class="doublewidespan">Skolt Sami</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,049 tokens 3,049 words 3,049 nodes 261 sentences">3K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction spoken"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Uralic, Sami</span>
-  </div>
-  <!-- end of Skolt Sami accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sms">
+      <span class="flagspan"><img class="flag" src="flags/svg/SAMI.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Skolt Sami</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,049 tokens 3,049 words 3,049 nodes 261 sentences">3K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction spoken"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Uralic, Sami</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Skolt Sami accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Skolt Sami treebanks</h3>
 
     <!-- start of Skolt Sami treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Skolt Sami / Giellagas entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sms">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Giellagas</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,049 tokens 3,049 words 3,049 nodes 261 sentences">3K</span></span>
@@ -13651,8 +12451,8 @@ <h3>Skolt Sami treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction spoken"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.417347"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Skolt Sami Giellagas treebank is based almost entirely on spoken Skolt Sami corpora.
 
@@ -13664,11 +12464,10 @@ <h3>Skolt Sami treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Skolt Sami / Giellagas entry -->
-      
-    </div> <!-- end of Skolt Sami treebank list -->
+    </details>
+    
+    <!-- end of Skolt Sami treebank list -->
 
     
 
@@ -13678,35 +12477,29 @@ <h3> Language documentation </h3>
     See the <a href="sms/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Skolt Sami accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Skolt Sami accordion row -->
 
   <!-- start of Slovak accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SK.svg" /></span>
-    <span class="doublewidespan">Slovak</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="106,043 tokens 106,372 words 106,424 nodes 10,604 sentences">106K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Slovak accordion row -->
-
-  <!-- start of Slovak accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sk">
+      <span class="flagspan"><img class="flag" src="flags/svg/SK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Slovak</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="106,043 tokens 106,372 words 106,424 nodes 10,604 sentences">106K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Slovak treebanks</h3>
 
     <!-- start of Slovak treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Slovak / SNK entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SNK</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="106,043 tokens 106,372 words 106,424 nodes 10,604 sentences">106K</span></span>
@@ -13715,8 +12508,8 @@ <h3>Slovak treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.686362"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Slovak UD treebank is based on data originally annotated as part of the
 Slovak National Corpus, following the annotation style of the Prague
@@ -13730,11 +12523,10 @@ <h3>Slovak treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Slovak / SNK entry -->
-      
-    </div> <!-- end of Slovak treebank list -->
+    </details>
+    
+    <!-- end of Slovak treebank list -->
 
     
 
@@ -13744,35 +12536,29 @@ <h3> Language documentation </h3>
     See the <a href="sk/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Slovak accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Slovak accordion row -->
 
   <!-- start of Slovenian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SI.svg" /></span>
-    <span class="doublewidespan">Slovenian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="365,490 tokens 365,490 words 365,490 nodes 19,556 sentences">365K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Slovenian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sl">
+      <span class="flagspan"><img class="flag" src="flags/svg/SI.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Slovenian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="365,490 tokens 365,490 words 365,490 nodes 19,556 sentences">365K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Slovenian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Slovenian treebanks</h3>
 
     <!-- start of Slovenian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Slovenian / SSJ entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SSJ</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="267,097 tokens 267,097 words 267,097 nodes 13,435 sentences">267K</span></span>
@@ -13781,8 +12567,8 @@ <h3>Slovenian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007952"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The SSJ treebank is the reference UD treebank for Slovenian, consisting of approximately 13,000 sentences and 267,097 tokens from fiction, non-fiction, periodical and Wikipedia texts in standard modern Slovenian. As of UD release 2.10 in May 2022, the original version of the SSJ UD treebank has been partially manually revised and extended with new manually annotated data.
 
@@ -13794,12 +12580,11 @@ <h3>Slovenian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Slovenian / SSJ entry -->
-      
-      <!-- start of Slovenian / SST entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SST</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="98,393 tokens 98,393 words 98,393 nodes 6,121 sentences">98K</span></span>
@@ -13808,8 +12593,8 @@ <h3>Slovenian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006654"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Spoken Slovenian Treebank (SST) is a manually annotated collection of transcribed audio recordings featuring spontaneous speech in various everyday situations. It includes 344 unique speech events (documents) amounting to approximately 10 hours of speech, encompassing a total of 6,121 utterances and 98,393 tokens.
 
@@ -13821,11 +12606,10 @@ <h3>Slovenian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Slovenian / SST entry -->
-      
-    </div> <!-- end of Slovenian treebank list -->
+    </details>
+    
+    <!-- end of Slovenian treebank list -->
 
     
     See <a href="treebanks/sl-comparison.html">here</a> for comparative statistics of Slovenian treebanks.
@@ -13837,35 +12621,29 @@ <h3> Language documentation </h3>
     See the <a href="sl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Slovenian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Slovenian accordion row -->
 
   <!-- start of South Levantine Arabic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/JO.svg" /></span>
-    <span class="doublewidespan">South Levantine Arabic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="789 tokens 789 words 789 nodes 100 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="social spoken"><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of South Levantine Arabic accordion row -->
-
-  <!-- start of South Levantine Arabic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ajp">
+      <span class="flagspan"><img class="flag" src="flags/svg/JO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">South Levantine Arabic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="789 tokens 789 words 789 nodes 100 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="social spoken"><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>South Levantine Arabic treebanks</h3>
 
     <!-- start of South Levantine Arabic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of South Levantine Arabic / MADAR entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ajp">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MADAR</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="789 tokens 789 words 789 nodes 100 sentences">&lt;1K</span></span>
@@ -13874,8 +12652,8 @@ <h3>South Levantine Arabic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social spoken"><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003020"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The South_Levantine_Arabic-MADAR treebank consists of 100 manually-annotated sentences taken from the [MADAR](https://camel.abudhabi.nyu.edu/madar/) (Multi-Arabic Dialect Applications and Resources) project.
 
@@ -13889,11 +12667,10 @@ <h3>South Levantine Arabic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of South Levantine Arabic / MADAR entry -->
-      
-    </div> <!-- end of South Levantine Arabic treebank list -->
+    </details>
+    
+    <!-- end of South Levantine Arabic treebank list -->
 
     
 
@@ -13903,35 +12680,29 @@ <h3> Language documentation </h3>
     See the <a href="ajp/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of South Levantine Arabic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of South Levantine Arabic accordion row -->
 
   <!-- start of Southern Kurdish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" /></span>
-    <span class="doublewidespan">Southern Kurdish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,551 tokens 1,685 words 1,685 nodes 221 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Southern Kurdish accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sdh">
+      <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Southern Kurdish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,551 tokens 1,685 words 1,685 nodes 221 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Southern Kurdish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Southern Kurdish treebanks</h3>
 
     <!-- start of Southern Kurdish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Southern Kurdish / Garrusi entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sdh">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Garrusi</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,551 tokens 1,685 words 1,685 nodes 221 sentences">1K</span></span>
@@ -13940,8 +12711,8 @@ <h3>Southern Kurdish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004087"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A dependency treebank in Universal Dependencies (UD) format, derived from narrative and questionnaire texts. This document gives an overview of the annotation scheme, linguistic features, and structural patterns seen in the data.
 
@@ -13953,11 +12724,10 @@ <h3>Southern Kurdish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Southern Kurdish / Garrusi entry -->
-      
-    </div> <!-- end of Southern Kurdish treebank list -->
+    </details>
+    
+    <!-- end of Southern Kurdish treebank list -->
 
     
 
@@ -13967,35 +12737,29 @@ <h3> Language documentation </h3>
     See the <a href="sdh/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Southern Kurdish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Southern Kurdish accordion row -->
 
   <!-- start of Spanish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ES.svg" /></span>
-    <span class="doublewidespan">Spanish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,001,586 tokens 1,022,971 words 1,031,083 nodes 35,214 sentences">1,022K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog news reviews spoken wiki"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Spanish accordion row -->
-
-  <!-- start of Spanish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-es">
+      <span class="flagspan"><img class="flag" src="flags/svg/ES.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Spanish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 treebanks">4</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,001,586 tokens 1,022,971 words 1,031,083 nodes 35,214 sentences">1,022K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog news reviews spoken wiki"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Spanish treebanks</h3>
 
     <!-- start of Spanish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Spanish / AnCora entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-es">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AnCora</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="547,558 tokens 560,137 words 568,249 nodes 17,662 sentences">560K</span></span>
@@ -14004,8 +12768,8 @@ <h3>Spanish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY 4.0"><img class="license" src="logos/by.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.760260"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Spanish data from the [AnCora](http://clic.ub.edu/corpus/) corpus.
 
@@ -14017,12 +12781,11 @@ <h3>Spanish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Spanish / AnCora entry -->
-      
-      <!-- start of Spanish / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-es">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="22,816 tokens 23,283 words 23,283 nodes 1,000 sentences">23K</span></span>
@@ -14031,8 +12794,8 @@ <h3>Spanish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.572067"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -14046,12 +12809,11 @@ <h3>Spanish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Spanish / PUD entry -->
-      
-      <!-- start of Spanish / GSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-es">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="423,225 tokens 431,478 words 431,478 nodes 16,013 sentences">431K</span></span>
@@ -14060,8 +12822,8 @@ <h3>Spanish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news reviews wiki"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006859"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Spanish UD is converted from the content head version of the [universal
 dependency treebank v2.0 (legacy)](https://github.com/ryanmcd/uni-dep-tb).
@@ -14074,12 +12836,11 @@ <h3>Spanish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Spanish / GSD entry -->
-      
-      <!-- start of Spanish / COSER entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-es">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">COSER</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="7,987 tokens 8,073 words 8,073 nodes 539 sentences">8K</span></span>
@@ -14088,8 +12849,8 @@ <h3>Spanish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005292"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The COSER UD Treebank (COSER-UD) is the first syntactically annotated corpus of spoken Spanish, based on a sample of the &#34;Corpus Oral y Sonoro del Español Rural&#34; (COSER; Fernández-Ordóñez 2005-present), meaning the &#34;Audible Corpus of Spoken Rural Spanish&#34;.
 
@@ -14101,11 +12862,10 @@ <h3>Spanish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Spanish / COSER entry -->
-      
-    </div> <!-- end of Spanish treebank list -->
+    </details>
+    
+    <!-- end of Spanish treebank list -->
 
     
     See <a href="treebanks/es-comparison.html">here</a> for comparative statistics of Spanish treebanks.
@@ -14117,35 +12877,29 @@ <h3> Language documentation </h3>
     See the <a href="es/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Spanish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Spanish accordion row -->
 
   <!-- start of Spanish Sign Language accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ES.svg" /></span>
-    <span class="doublewidespan">Spanish Sign Language</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,393 tokens 1,393 words 1,393 nodes 488 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Sign Language</span>
-  </div>
-  <!-- end of Spanish Sign Language accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ssp">
+      <span class="flagspan"><img class="flag" src="flags/svg/ES.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Spanish Sign Language</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,393 tokens 1,393 words 1,393 nodes 488 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Sign Language</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Spanish Sign Language accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Spanish Sign Language treebanks</h3>
 
     <!-- start of Spanish Sign Language treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Spanish Sign Language / LSE entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ssp">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LSE</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,393 tokens 1,393 words 1,393 nodes 488 sentences">1K</span></span>
@@ -14154,8 +12908,8 @@ <h3>Spanish Sign Language treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.001900"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Universal Dependency treebank for Spanish Sign Language (Lengua de Signos Española [LSE], ISO 639-3: ssp) was developed by the GRADES group at the University of Vigo.
 
@@ -14167,11 +12921,10 @@ <h3>Spanish Sign Language treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Spanish Sign Language / LSE entry -->
-      
-    </div> <!-- end of Spanish Sign Language treebank list -->
+    </details>
+    
+    <!-- end of Spanish Sign Language treebank list -->
 
     
 
@@ -14181,35 +12934,29 @@ <h3> Language documentation </h3>
     See the <a href="ssp/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Spanish Sign Language accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Spanish Sign Language accordion row -->
 
   <!-- start of Swedish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SE.svg" /></span>
-    <span class="doublewidespan">Swedish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="5 treebanks">5</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="229,836 tokens 229,838 words 229,886 nodes 13,417 sentences">229K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction learner-essays news nonfiction spoken wiki"><i class="fa fa-book"></i><i class="fa fa-edit"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Swedish accordion row -->
-
-  <!-- start of Swedish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sv">
+      <span class="flagspan"><img class="flag" src="flags/svg/SE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Swedish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="5 treebanks">5</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="229,836 tokens 229,838 words 229,886 nodes 13,417 sentences">229K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction learner-essays news nonfiction spoken wiki"><i class="fa fa-book"></i><i class="fa fa-edit"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Swedish treebanks</h3>
 
     <!-- start of Swedish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Swedish / LinES entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LinES</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="102,538 tokens 102,540 words 102,540 nodes 5,696 sentences">102K</span></span>
@@ -14218,8 +12965,8 @@ <h3>Swedish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.666076"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Swedish_LinES is the Swedish half of the LinES Parallel Treebank with UD annotations.
 All segments are translations from English and the sources cover literary genres, online
@@ -14233,12 +12980,11 @@ <h3>Swedish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Swedish / LinES entry -->
-      
-      <!-- start of Swedish / Talbanken entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Talbanken</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="96,820 tokens 96,820 words 96,859 nodes 6,038 sentences">96K</span></span>
@@ -14247,8 +12993,8 @@ <h3>Swedish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.657306"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Swedish-Talbanken treebank is based on Talbanken, a treebank developed at Lund University
 in the 1970s.
@@ -14261,12 +13007,11 @@ <h3>Swedish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Swedish / Talbanken entry -->
-      
-      <!-- start of Swedish / SweLL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SweLL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="10,895 tokens 10,895 words 10,895 nodes 643 sentences">10K</span></span>
@@ -14275,8 +13020,8 @@ <h3>Swedish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.538761"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A treebank of learner Swedish based on SweLL, the Swedish Learner Language corpus.
 
@@ -14288,12 +13033,11 @@ <h3>Swedish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Swedish / SweLL entry -->
-      
-      <!-- start of Swedish / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,076 tokens 19,076 words 19,085 nodes 1,000 sentences">19K</span></span>
@@ -14302,8 +13046,8 @@ <h3>Swedish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.413280"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Swedish-PUD is the Swedish part of the Parallel Universal Dependencies (PUD) treebanks.
 
@@ -14315,12 +13059,11 @@ <h3>Swedish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Swedish / PUD entry -->
-      
-      <!-- start of Swedish / Old entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Old</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="507 tokens 507 words 507 nodes 40 sentences">&lt;1K</span></span>
@@ -14329,8 +13072,8 @@ <h3>Swedish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.384603"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Swedish-Old is a treebank containing texts from Old Swedish (1225-1526).
 
@@ -14342,11 +13085,10 @@ <h3>Swedish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Swedish / Old entry -->
-      
-    </div> <!-- end of Swedish treebank list -->
+    </details>
+    
+    <!-- end of Swedish treebank list -->
 
     
     See <a href="treebanks/sv-comparison.html">here</a> for comparative statistics of Swedish treebanks.
@@ -14358,35 +13100,29 @@ <h3> Language documentation </h3>
     See the <a href="sv/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Swedish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Swedish accordion row -->
 
   <!-- start of Swedish Sign Language accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SE.svg" /></span>
-    <span class="doublewidespan">Swedish Sign Language</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,610 tokens 1,610 words 1,610 nodes 203 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Sign Language</span>
-  </div>
-  <!-- end of Swedish Sign Language accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-swl">
+      <span class="flagspan"><img class="flag" src="flags/svg/SE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Swedish Sign Language</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,610 tokens 1,610 words 1,610 nodes 203 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Sign Language</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Swedish Sign Language accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Swedish Sign Language treebanks</h3>
 
     <!-- start of Swedish Sign Language treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Swedish Sign Language / SSLC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-swl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SSLC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,610 tokens 1,610 words 1,610 nodes 203 sentences">1K</span></span>
@@ -14395,8 +13131,8 @@ <h3>Swedish Sign Language treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.001747"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Universal Dependencies treebank for Swedish Sign Language (ISO 639-3: swl)
 is derived from the Swedish Sign Language Corpus (SSLC) from the department of
@@ -14410,11 +13146,10 @@ <h3>Swedish Sign Language treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Swedish Sign Language / SSLC entry -->
-      
-    </div> <!-- end of Swedish Sign Language treebank list -->
+    </details>
+    
+    <!-- end of Swedish Sign Language treebank list -->
 
     
 
@@ -14424,35 +13159,29 @@ <h3> Language documentation </h3>
     See the <a href="swl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Swedish Sign Language accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Swedish Sign Language accordion row -->
 
   <!-- start of Tagalog accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" /></span>
-    <span class="doublewidespan">Tagalog</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,745 tokens 1,831 words 1,831 nodes 222 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
-  </div>
-  <!-- end of Tagalog accordion row -->
-
-  <!-- start of Tagalog accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-tl">
+      <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tagalog</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,745 tokens 1,831 words 1,831 nodes 222 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tagalog treebanks</h3>
 
     <!-- start of Tagalog treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tagalog / TRG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TRG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="734 tokens 734 words 734 nodes 128 sentences">&lt;1K</span></span>
@@ -14461,8 +13190,8 @@ <h3>Tagalog treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003712"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Tagalog-TRG is a UD treebank manually annotated using sentences from a grammar book.
 
@@ -14474,12 +13203,11 @@ <h3>Tagalog treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tagalog / TRG entry -->
-      
-      <!-- start of Tagalog / Ugnayan entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Ugnayan</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,011 tokens 1,097 words 1,097 nodes 94 sentences">1K</span></span>
@@ -14488,8 +13216,8 @@ <h3>Tagalog treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002938"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Ugnayan is a manually annotated Tagalog treebank currently composed of educational fiction and nonfiction text. The treebank is under development at the University of the Philippines.
 
@@ -14501,11 +13229,10 @@ <h3>Tagalog treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tagalog / Ugnayan entry -->
-      
-    </div> <!-- end of Tagalog treebank list -->
+    </details>
+    
+    <!-- end of Tagalog treebank list -->
 
     
     See <a href="treebanks/tl-comparison.html">here</a> for comparative statistics of Tagalog treebanks.
@@ -14517,35 +13244,29 @@ <h3> Language documentation </h3>
     See the <a href="tl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Tagalog accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tagalog accordion row -->
 
   <!-- start of Tamil accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Tamil</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="11,171 tokens 12,165 words 12,165 nodes 1,134 sentences">12K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Dravidian</span>
-  </div>
-  <!-- end of Tamil accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ta">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tamil</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="11,171 tokens 12,165 words 12,165 nodes 1,134 sentences">12K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Dravidian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Tamil accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Tamil treebanks</h3>
 
     <!-- start of Tamil treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tamil / TTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ta">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="8,635 tokens 9,581 words 9,581 nodes 600 sentences">9K</span></span>
@@ -14554,8 +13275,8 @@ <h3>Tamil treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004367"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Tamil treebank is based on the Tamil Dependency Treebank created at the
 Charles University in Prague by Loganathan Ramasamy.
@@ -14568,12 +13289,11 @@ <h3>Tamil treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tamil / TTB entry -->
-      
-      <!-- start of Tamil / MWTT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ta">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MWTT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,536 tokens 2,584 words 2,584 nodes 534 sentences">2K</span></span>
@@ -14582,8 +13302,8 @@ <h3>Tamil treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003564"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         MWTT - Modern Written Tamil Treebank has sentences taken primarily from a text called &#34;A Grammar of Modern Tamil by Thomas Lehmann (1993). This initial release has 536 sentences of various lengths, and all of these are added as the test set.
 
@@ -14595,11 +13315,10 @@ <h3>Tamil treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tamil / MWTT entry -->
-      
-    </div> <!-- end of Tamil treebank list -->
+    </details>
+    
+    <!-- end of Tamil treebank list -->
 
     
     See <a href="treebanks/ta-comparison.html">here</a> for comparative statistics of Tamil treebanks.
@@ -14611,35 +13330,29 @@ <h3> Language documentation </h3>
     See the <a href="ta/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Tamil accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tamil accordion row -->
 
   <!-- start of Tatar accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-TA.svg" /></span>
-    <span class="doublewidespan">Tatar</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,280 tokens 2,280 words 2,280 nodes 148 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Turkic, Northwestern</span>
-  </div>
-  <!-- end of Tatar accordion row -->
-
-  <!-- start of Tatar accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-tt">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-TA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tatar</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,280 tokens 2,280 words 2,280 nodes 148 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Turkic, Northwestern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tatar treebanks</h3>
 
     <!-- start of Tatar treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tatar / NMCTT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">NMCTT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,280 tokens 2,280 words 2,280 nodes 148 sentences">2K</span></span>
@@ -14648,8 +13361,8 @@ <h3>Tatar treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004491"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Tatar-NMCTT is a manually annotated corpus of the Tatar language based on the text from Tatar-Inform (tatar-inform.tatar),
 an online news website.
@@ -14662,11 +13375,10 @@ <h3>Tatar treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tatar / NMCTT entry -->
-      
-    </div> <!-- end of Tatar treebank list -->
+    </details>
+    
+    <!-- end of Tatar treebank list -->
 
     
 
@@ -14676,35 +13388,29 @@ <h3> Language documentation </h3>
     See the <a href="tt/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Tatar accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tatar accordion row -->
 
   <!-- start of Teko accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" /></span>
-    <span class="doublewidespan">Teko</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,689 tokens 2,896 words 2,896 nodes 913 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Tupian, Maweti-Guarani</span>
-  </div>
-  <!-- end of Teko accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-eme">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Teko</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,689 tokens 2,896 words 2,896 nodes 913 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Tupian, Maweti-Guarani</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Teko accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Teko treebanks</h3>
 
     <!-- start of Teko treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Teko / TuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-eme">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,689 tokens 2,896 words 2,896 nodes 913 sentences">2K</span></span>
@@ -14713,8 +13419,8 @@ <h3>Teko treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004713"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Teko-TuDeT is a collection of annotated sentences in &lt;a href=&#34;https://glottolog.org/resource/languoid/id/emer1243&#34;&gt; Tekó (Emérillon) &lt;/a&gt;. The sentences stem from the only grammatical description of the language (Rose, 2011). Sentence annotation and documantation by Uliana Vedenina and Fabrício Ferraz Gerardi.
 
@@ -14726,11 +13432,10 @@ <h3>Teko treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Teko / TuDeT entry -->
-      
-    </div> <!-- end of Teko treebank list -->
+    </details>
+    
+    <!-- end of Teko treebank list -->
 
     
 
@@ -14740,35 +13445,29 @@ <h3> Language documentation </h3>
     See the <a href="eme/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Teko accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Teko accordion row -->
 
   <!-- start of Telugu accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Telugu</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6,465 tokens 6,465 words 6,465 nodes 1,328 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Dravidian</span>
-  </div>
-  <!-- end of Telugu accordion row -->
-
-  <!-- start of Telugu accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-te">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Telugu</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6,465 tokens 6,465 words 6,465 nodes 1,328 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Dravidian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Telugu treebanks</h3>
 
     <!-- start of Telugu treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Telugu / MTG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-te">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MTG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,465 tokens 6,465 words 6,465 nodes 1,328 sentences">6K</span></span>
@@ -14777,8 +13476,8 @@ <h3>Telugu treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003060"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Telugu UD treebank is created in UD based on manual annotations of sentences from a grammar book.
 
@@ -14790,11 +13489,10 @@ <h3>Telugu treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Telugu / MTG entry -->
-      
-    </div> <!-- end of Telugu treebank list -->
+    </details>
+    
+    <!-- end of Telugu treebank list -->
 
     
 
@@ -14804,35 +13502,29 @@ <h3> Language documentation </h3>
     See the <a href="te/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Telugu accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Telugu accordion row -->
 
   <!-- start of Telugu English accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Telugu English</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="456 tokens 456 words 456 nodes 97 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Code switching</span>
-  </div>
-  <!-- end of Telugu English accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-qte">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Telugu English</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="456 tokens 456 words 456 nodes 97 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Code switching</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Telugu English accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Telugu English treebanks</h3>
 
     <!-- start of Telugu English treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Telugu English / TECT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-qte">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TECT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="456 tokens 456 words 456 nodes 97 sentences">&lt;1K</span></span>
@@ -14841,8 +13533,8 @@ <h3>Telugu English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000856"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Telugu_English-TECT is a Telugu-English code-switching treebank.
 
@@ -14854,11 +13546,10 @@ <h3>Telugu English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Telugu English / TECT entry -->
-      
-    </div> <!-- end of Telugu English treebank list -->
+    </details>
+    
+    <!-- end of Telugu English treebank list -->
 
     
 
@@ -14868,35 +13559,29 @@ <h3> Language documentation </h3>
     See the <a href="qte/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Telugu English accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Telugu English accordion row -->
 
   <!-- start of Thai accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TH.svg" /></span>
-    <span class="doublewidespan">Thai</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="99,545 tokens 99,545 words 99,545 nodes 4,627 sentences">99K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction legal news nonfiction wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Tai-Kadai</span>
-  </div>
-  <!-- end of Thai accordion row -->
-
-  <!-- start of Thai accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-th">
+      <span class="flagspan"><img class="flag" src="flags/svg/TH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Thai</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="99,545 tokens 99,545 words 99,545 nodes 4,627 sentences">99K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction legal news nonfiction wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Tai-Kadai</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Thai treebanks</h3>
 
     <!-- start of Thai treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Thai / TUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-th">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="77,215 tokens 77,215 words 77,215 nodes 3,627 sentences">77K</span></span>
@@ -14905,8 +13590,8 @@ <h3>Thai treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic fiction legal news nonfiction wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.512861"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         *UD Thai TUD* (Thai Universal Dependency Treebank) is a treebank of 3,627 syntactic trees from the Thai National Corpus and Wikipedia, annotated in Universal Dependencies, covering diverse text types and topics across various domains.
 
@@ -14918,12 +13603,11 @@ <h3>Thai treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Thai / TUD entry -->
-      
-      <!-- start of Thai / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-th">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="22,330 tokens 22,330 words 22,330 nodes 1,000 sentences">22K</span></span>
@@ -14932,8 +13616,8 @@ <h3>Thai treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.440513"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -14947,11 +13631,10 @@ <h3>Thai treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Thai / PUD entry -->
-      
-    </div> <!-- end of Thai treebank list -->
+    </details>
+    
+    <!-- end of Thai treebank list -->
 
     
     See <a href="treebanks/th-comparison.html">here</a> for comparative statistics of Thai treebanks.
@@ -14963,35 +13646,29 @@ <h3> Language documentation </h3>
     See the <a href="th/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Thai accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Thai accordion row -->
 
   <!-- start of Tswana accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BW.svg" /></span>
-    <span class="doublewidespan">Tswana</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="214 tokens 214 words 214 nodes 20 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Niger-Congo, Bantoid</span>
-  </div>
-  <!-- end of Tswana accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-tn">
+      <span class="flagspan"><img class="flag" src="flags/svg/BW.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tswana</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="214 tokens 214 words 214 nodes 20 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Niger-Congo, Bantoid</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Tswana accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Tswana treebanks</h3>
 
     <!-- start of Tswana treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tswana / Popapolelo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Popapolelo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="214 tokens 214 words 214 nodes 20 sentences">&lt;1K</span></span>
@@ -15000,8 +13677,8 @@ <h3>Tswana treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.178586"><img src="/img/stars10.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Tswana-Popapolelo is a translation of the 20 Cairo Cicling sentences (https://github.com/UniversalDependencies/cairo) annotated with XPOS, UPOS and dependency relations.
 
@@ -15013,11 +13690,10 @@ <h3>Tswana treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tswana / Popapolelo entry -->
-      
-    </div> <!-- end of Tswana treebank list -->
+    </details>
+    
+    <!-- end of Tswana treebank list -->
 
     
 
@@ -15027,35 +13703,29 @@ <h3> Language documentation </h3>
     See the <a href="tn/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Tswana accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tswana accordion row -->
 
   <!-- start of Tupinamba accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Tupinamba</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4,397 tokens 4,508 words 4,508 nodes 581 sentences">4K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Tupian, Maweti-Guarani</span>
-  </div>
-  <!-- end of Tupinamba accordion row -->
-
-  <!-- start of Tupinamba accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-tpn">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tupinamba</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4,397 tokens 4,508 words 4,508 nodes 581 sentences">4K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Tupian, Maweti-Guarani</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tupinamba treebanks</h3>
 
     <!-- start of Tupinamba treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tupinamba / TuDeT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tpn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TuDeT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4,397 tokens 4,508 words 4,508 nodes 581 sentences">4K</span></span>
@@ -15064,8 +13734,8 @@ <h3>Tupinamba treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003652"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Tupinamba-TuDeT is a collection of annotated sentences in [Tupinambá](https://glottolog.org/resource/languoid/id/tupi1273). All known sources in this language are being annotated: cathecisms, letters, poems, theater plays, and grammars (sixteenth and seventeenth century). Sentence annotation and documentation by [Fabrício Ferraz Gerardi](https://languagestructure.github.io).
 
@@ -15077,11 +13747,10 @@ <h3>Tupinamba treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tupinamba / TuDeT entry -->
-      
-    </div> <!-- end of Tupinamba treebank list -->
+    </details>
+    
+    <!-- end of Tupinamba treebank list -->
 
     
 
@@ -15091,35 +13760,29 @@ <h3> Language documentation </h3>
     See the <a href="tpn/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Tupinamba accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tupinamba accordion row -->
 
   <!-- start of Turkish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" /></span>
-    <span class="doublewidespan">Turkish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="10 treebanks">10</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="729,419 tokens 735,211 words 735,211 nodes 82,318 sentences">735K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples news nonfiction reviews wiki"><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Turkic, Southwestern</span>
-  </div>
-  <!-- end of Turkish accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-tr">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Turkish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="10 treebanks">10</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="729,419 tokens 735,211 words 735,211 nodes 82,318 sentences">735K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples news nonfiction reviews wiki"><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Turkic, Southwestern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Turkish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Turkish treebanks</h3>
 
     <!-- start of Turkish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Turkish / BOUN entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BOUN</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="121,835 tokens 125,212 words 125,212 nodes 9,761 sentences">125K</span></span>
@@ -15128,8 +13791,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.774288"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Turkish dependency treebank annotated in UD style. Created by the members of [TABILAB](https://tabilab.cmpe.boun.edu.tr/) from Boğaziçi University.
 
@@ -15141,12 +13804,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / BOUN entry -->
-      
-      <!-- start of Turkish / Kenet entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Kenet</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="178,658 tokens 178,658 words 178,658 nodes 18,687 sentences">178K</span></span>
@@ -15155,8 +13817,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.696165"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Turkish-Kenet UD Treebank is the biggest treebank of Turkish. It consists of 18,700 manually annotated sentences and 178,700 tokens. Its corpus consists of dictionary examples.
 
@@ -15168,12 +13830,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / Kenet entry -->
-      
-      <!-- start of Turkish / Penn entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Penn</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="183,612 tokens 183,612 words 183,612 nodes 16,395 sentences">183K</span></span>
@@ -15182,8 +13843,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.679360"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Turkish version of the Penn Treebank. It consists of a total of 9,560 manually annotated sentences and 87,367 tokens. (It only includes sentences up to 15 words long.)
 
@@ -15195,12 +13856,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / Penn entry -->
-      
-      <!-- start of Turkish / Tourism entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Tourism</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="91,152 tokens 91,152 words 91,152 nodes 19,830 sentences">91K</span></span>
@@ -15209,8 +13869,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="reviews"><i class="fa fa-thumbs-o-up"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.657682"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Turkish Tourism is a domain specific treebank consisting of 19,750 manually annotated sentences and 92,200 tokens. These sentences were taken from the original customer reviews of a tourism company.
 
@@ -15222,12 +13882,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / Tourism entry -->
-      
-      <!-- start of Turkish / Atis entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Atis</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="44,296 tokens 44,296 words 44,296 nodes 5,284 sentences">44K</span></span>
@@ -15236,8 +13895,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.644601"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank is a translation of English ATIS (Airline Travel Information System) corpus (see References). It consists of 5432 sentences.
 
@@ -15249,12 +13908,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / Atis entry -->
-      
-      <!-- start of Turkish / IMST entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IMST</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="56,422 tokens 58,096 words 58,096 nodes 5,635 sentences">58K</span></span>
@@ -15263,8 +13921,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.634475"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Turkish Treebank, also called the IMST-UD Treebank, is a semi-automatic conversion of the IMST Treebank (Sulubacak&amp;Eryiğit, 2018; Sulubacak et al., 2016).
 
@@ -15276,12 +13934,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / IMST entry -->
-      
-      <!-- start of Turkish / FrameNet entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">FrameNet</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,223 tokens 19,223 words 19,223 nodes 2,698 sentences">19K</span></span>
@@ -15290,8 +13947,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.518136"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Turkish FrameNet consists of 2,700 manually annotated example sentences and 19,221 tokens. Its data consists of  the sentences taken from the Turkish FrameNet Project. The annotated sentences can be filtered according to the semantic frame category of the root of the sentence.
 
@@ -15303,12 +13960,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / FrameNet entry -->
-      
-      <!-- start of Turkish / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="883 tokens 904 words 904 nodes 148 sentences">&lt;1K</span></span>
@@ -15317,8 +13973,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.404723"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Turkish-TueCL treebank is part of a parallel Universal Dependencies corpus containing 148 sentences across four Turkic languages (Turkish, Azerbaijani, Kyrgyz, and Uzbek), designed to facilitate cross-linguistic research on these related languages.
 
@@ -15330,12 +13986,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / TueCL entry -->
-      
-      <!-- start of Turkish / GB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="16,803 tokens 17,177 words 17,177 nodes 2,880 sentences">17K</span></span>
@@ -15344,8 +13999,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006037"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a treebank annotating example sentences from a comprehensive grammar book of Turkish.
 
@@ -15357,12 +14012,11 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / GB entry -->
-      
-      <!-- start of Turkish / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="16,535 tokens 16,881 words 16,881 nodes 1,000 sentences">16K</span></span>
@@ -15371,8 +14025,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 3.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005022"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -15386,11 +14040,10 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / PUD entry -->
-      
-    </div> <!-- end of Turkish treebank list -->
+    </details>
+    
+    <!-- end of Turkish treebank list -->
 
     
     See <a href="treebanks/tr-comparison.html">here</a> for comparative statistics of Turkish treebanks.
@@ -15402,35 +14055,29 @@ <h3> Language documentation </h3>
     See the <a href="tr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Turkish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Turkish accordion row -->
 
   <!-- start of Turkish English accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" /></span>
-    <span class="doublewidespan">Turkish English</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="441 tokens 441 words 441 nodes 58 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="social spoken"><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Code switching</span>
-  </div>
-  <!-- end of Turkish English accordion row -->
-
-  <!-- start of Turkish English accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-qti">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Turkish English</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="441 tokens 441 words 441 nodes 58 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="social spoken"><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Code switching</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Turkish English treebanks</h3>
 
     <!-- start of Turkish English treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Turkish English / BUTR entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-qti">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BUTR</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="441 tokens 441 words 441 nodes 58 sentences">&lt;1K</span></span>
@@ -15439,8 +14086,8 @@ <h3>Turkish English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social spoken"><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.398884"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Turkish_English-BUTR is a treebank of Turkish-English code-switched sentences collected from Boğaziçi University students, annotated in the Universal Dependencies framework to provide a standardized resource for analyzing syntactic patterns in Turkish-English code-switching.
 
@@ -15452,11 +14099,10 @@ <h3>Turkish English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish English / BUTR entry -->
-      
-    </div> <!-- end of Turkish English treebank list -->
+    </details>
+    
+    <!-- end of Turkish English treebank list -->
 
     
 
@@ -15466,35 +14112,29 @@ <h3> Language documentation </h3>
     See the <a href="qti/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Turkish English accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Turkish English accordion row -->
 
   <!-- start of Turkish German accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" /></span>
-    <span class="doublewidespan">Turkish German</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="36,934 tokens 37,227 words 37,227 nodes 2,184 sentences">37K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Code switching</span>
-  </div>
-  <!-- end of Turkish German accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-qtd">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Turkish German</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="36,934 tokens 37,227 words 37,227 nodes 2,184 sentences">37K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Code switching</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Turkish German accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Turkish German treebanks</h3>
 
     <!-- start of Turkish German treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Turkish German / SAGT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-qtd">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SAGT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="36,934 tokens 37,227 words 37,227 nodes 2,184 sentences">37K</span></span>
@@ -15503,8 +14143,8 @@ <h3>Turkish German treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.007066"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Turkish-German SAGT is a Turkish-German code-switching treebank that is developed as part of the [SAGT](https://www.ims.uni-stuttgart.de/en/research/projects/sagt/) project.
 
@@ -15516,11 +14156,10 @@ <h3>Turkish German treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish German / SAGT entry -->
-      
-    </div> <!-- end of Turkish German treebank list -->
+    </details>
+    
+    <!-- end of Turkish German treebank list -->
 
     
 
@@ -15530,35 +14169,29 @@ <h3> Language documentation </h3>
     See the <a href="qtd/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Turkish German accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Turkish German accordion row -->
 
   <!-- start of Ukrainian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/UA.svg" /></span>
-    <span class="doublewidespan">Ukrainian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="231,867 tokens 231,916 words 232,149 nodes 14,234 sentences">231K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog email fiction government grammar-examples legal news reviews social spoken web wiki"><i class="fa fa-calendar"></i><i class="fa fa-envelope"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Ukrainian accordion row -->
-
-  <!-- start of Ukrainian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-uk">
+      <span class="flagspan"><img class="flag" src="flags/svg/UA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Ukrainian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="231,867 tokens 231,916 words 232,149 nodes 14,234 sentences">231K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog email fiction government grammar-examples legal news reviews social spoken web wiki"><i class="fa fa-calendar"></i><i class="fa fa-envelope"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Ukrainian treebanks</h3>
 
     <!-- start of Ukrainian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Ukrainian / ParlaMint entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-uk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ParlaMint</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="109,166 tokens 109,166 words 109,166 nodes 7,142 sentences">109K</span></span>
@@ -15567,8 +14200,8 @@ <h3>Ukrainian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="government legal spoken"><i class="fa fa-fort-awesome"></i><i class="fa fa-legal"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.776111"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Ukrainian-ParlaMint is a collection of Ukrainian parliamentary transcripts annotated in Universal Dependencies. The texts are published on the official website of the Ukrainian parliament (https://www.rada.gov.ua/documents/Stenbul_pz/) and are taken for UD_Ukrainian-ParlaMint from the Ukrainian section of the ParlaMint project (https://www.clarin.eu/parlamint).
 
@@ -15580,12 +14213,11 @@ <h3>Ukrainian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ukrainian / ParlaMint entry -->
-      
-      <!-- start of Ukrainian / IU entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-uk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IU</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="122,701 tokens 122,750 words 122,983 nodes 7,092 sentences">122K</span></span>
@@ -15594,8 +14226,8 @@ <h3>Ukrainian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog email fiction grammar-examples legal news reviews social web wiki"><i class="fa fa-calendar"></i><i class="fa fa-envelope"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-legal"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.008321"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Gold standard Universal Dependencies corpus for Ukrainian, developed for UD originally, by [Institute for Ukrainian](https://mova.institute), NGO.   [[українською](https://mova.institute/золотий_стандарт)]
 
@@ -15607,11 +14239,10 @@ <h3>Ukrainian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ukrainian / IU entry -->
-      
-    </div> <!-- end of Ukrainian treebank list -->
+    </details>
+    
+    <!-- end of Ukrainian treebank list -->
 
     
     See <a href="treebanks/uk-comparison.html">here</a> for comparative statistics of Ukrainian treebanks.
@@ -15623,35 +14254,29 @@ <h3> Language documentation </h3>
     See the <a href="uk/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Ukrainian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Ukrainian accordion row -->
 
   <!-- start of Umbrian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IT-UMB.svg" /></span>
-    <span class="doublewidespan">Umbrian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,077 tokens 1,162 words 1,162 nodes 202 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Italic</span>
-  </div>
-  <!-- end of Umbrian accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-xum">
+      <span class="flagspan"><img class="flag" src="flags/svg/IT-UMB.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Umbrian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,077 tokens 1,162 words 1,162 nodes 202 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Italic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Umbrian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Umbrian treebanks</h3>
 
     <!-- start of Umbrian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Umbrian / IKUVINA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-xum">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IKUVINA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,077 tokens 1,162 words 1,162 nodes 202 sentences">1K</span></span>
@@ -15660,8 +14285,8 @@ <h3>Umbrian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002837"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Umbrian-IKUVINA is a dependency treebank rendering of the Iguvine tablets ([Wikipedia](https://en.wikipedia.org/wiki/Iguvine_Tablets)).
 The seven bronze tablets describe religious ceremonies performed by the Umbrian people in Italy before the rise of the Roman empire.
@@ -15677,11 +14302,10 @@ <h3>Umbrian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Umbrian / IKUVINA entry -->
-      
-    </div> <!-- end of Umbrian treebank list -->
+    </details>
+    
+    <!-- end of Umbrian treebank list -->
 
     
 
@@ -15691,35 +14315,29 @@ <h3> Language documentation </h3>
     See the <a href="xum/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Umbrian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Umbrian accordion row -->
 
   <!-- start of Upper Sorbian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/HSB.svg" /></span>
-    <span class="doublewidespan">Upper Sorbian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="11,167 tokens 11,167 words 11,167 nodes 644 sentences">11K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction wiki"><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Upper Sorbian accordion row -->
-
-  <!-- start of Upper Sorbian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-hsb">
+      <span class="flagspan"><img class="flag" src="flags/svg/HSB.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Upper Sorbian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="11,167 tokens 11,167 words 11,167 nodes 644 sentences">11K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="nonfiction wiki"><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Upper Sorbian treebanks</h3>
 
     <!-- start of Upper Sorbian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Upper Sorbian / UFAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hsb">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UFAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="11,167 tokens 11,167 words 11,167 nodes 644 sentences">11K</span></span>
@@ -15728,8 +14346,8 @@ <h3>Upper Sorbian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction wiki"><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.589799"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A small treebank of Upper Sorbian based mostly on Wikipedia, partly also on other Sorbian websites.
 
@@ -15741,11 +14359,10 @@ <h3>Upper Sorbian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Upper Sorbian / UFAL entry -->
-      
-    </div> <!-- end of Upper Sorbian treebank list -->
+    </details>
+    
+    <!-- end of Upper Sorbian treebank list -->
 
     
 
@@ -15755,35 +14372,29 @@ <h3> Language documentation </h3>
     See the <a href="hsb/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Upper Sorbian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Upper Sorbian accordion row -->
 
   <!-- start of Urdu accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" /></span>
-    <span class="doublewidespan">Urdu</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="138,077 tokens 138,077 words 138,077 nodes 5,130 sentences">138K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Urdu accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ur">
+      <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Urdu</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="138,077 tokens 138,077 words 138,077 nodes 5,130 sentences">138K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Urdu accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Urdu treebanks</h3>
 
     <!-- start of Urdu treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Urdu / UDTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ur">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UDTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="138,077 tokens 138,077 words 138,077 nodes 5,130 sentences">138K</span></span>
@@ -15792,8 +14403,8 @@ <h3>Urdu treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006708"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Urdu Universal Dependency Treebank was automatically converted from Urdu Dependency Treebank (UDTB) which is part of an ongoing effort of creating multi-layered treebanks for Hindi and Urdu.
 
@@ -15805,11 +14416,10 @@ <h3>Urdu treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Urdu / UDTB entry -->
-      
-    </div> <!-- end of Urdu treebank list -->
+    </details>
+    
+    <!-- end of Urdu treebank list -->
 
     
 
@@ -15819,35 +14429,29 @@ <h3> Language documentation </h3>
     See the <a href="ur/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Urdu accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Urdu accordion row -->
 
   <!-- start of Uyghur accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" /></span>
-    <span class="doublewidespan">Uyghur</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="40,236 tokens 40,236 words 40,236 nodes 3,456 sentences">40K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Turkic, Southeastern</span>
-  </div>
-  <!-- end of Uyghur accordion row -->
-
-  <!-- start of Uyghur accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ug">
+      <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Uyghur</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="40,236 tokens 40,236 words 40,236 nodes 3,456 sentences">40K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Turkic, Southeastern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Uyghur treebanks</h3>
 
     <!-- start of Uyghur treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Uyghur / UDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ug">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="40,236 tokens 40,236 words 40,236 nodes 3,456 sentences">40K</span></span>
@@ -15856,8 +14460,8 @@ <h3>Uyghur treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005084"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Uyghur UD treebank is based on the Uyghur Dependency Treebank (UDT),
 created at the Xinjiang University in Ürümqi, China.
@@ -15870,11 +14474,10 @@ <h3>Uyghur treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Uyghur / UDT entry -->
-      
-    </div> <!-- end of Uyghur treebank list -->
+    </details>
+    
+    <!-- end of Uyghur treebank list -->
 
     
 
@@ -15884,35 +14487,29 @@ <h3> Language documentation </h3>
     See the <a href="ug/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Uyghur accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Uyghur accordion row -->
 
   <!-- start of Uzbek accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/UZ.svg" /></span>
-    <span class="doublewidespan">Uzbek</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="14,451 tokens 14,451 words 14,451 nodes 1,332 sentences">14K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction grammar-examples news"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Turkic, Southeastern</span>
-  </div>
-  <!-- end of Uzbek accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-uz">
+      <span class="flagspan"><img class="flag" src="flags/svg/UZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Uzbek</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="14,451 tokens 14,451 words 14,451 nodes 1,332 sentences">14K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction grammar-examples news"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Turkic, Southeastern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Uzbek accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Uzbek treebanks</h3>
 
     <!-- start of Uzbek treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Uzbek / UzUDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-uz">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UzUDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="7,582 tokens 7,582 words 7,582 nodes 684 sentences">7K</span></span>
@@ -15921,8 +14518,8 @@ <h3>Uzbek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic fiction"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.489040"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Uzbek-UzUDT is a manually annotated Universal Dependencies treebank for Uzbek language.
 
@@ -15934,12 +14531,11 @@ <h3>Uzbek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Uzbek / UzUDT entry -->
-      
-      <!-- start of Uzbek / UT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-uz">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="5,930 tokens 5,930 words 5,930 nodes 500 sentences">5K</span></span>
@@ -15948,8 +14544,8 @@ <h3>Uzbek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction news"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005289"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is the first Uzbek UD treebank.
 
@@ -15961,12 +14557,11 @@ <h3>Uzbek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Uzbek / UT entry -->
-      
-      <!-- start of Uzbek / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-uz">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="939 tokens 939 words 939 nodes 148 sentences">&lt;1K</span></span>
@@ -15975,8 +14570,8 @@ <h3>Uzbek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004053"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Uzbek-TueCL treebank is part of a parallel Universal Dependencies corpus containing 148 sentences across four Turkic languages: Turkish, Azerbaijani, Kyrgyz, and Uzbek.
 
@@ -15988,11 +14583,10 @@ <h3>Uzbek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Uzbek / TueCL entry -->
-      
-    </div> <!-- end of Uzbek treebank list -->
+    </details>
+    
+    <!-- end of Uzbek treebank list -->
 
     
     See <a href="treebanks/uz-comparison.html">here</a> for comparative statistics of Uzbek treebanks.
@@ -16004,35 +14598,29 @@ <h3> Language documentation </h3>
     See the <a href="uz/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Uzbek accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Uzbek accordion row -->
 
   <!-- start of Veps accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-VEPS.svg" /></span>
-    <span class="doublewidespan">Veps</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,303 tokens 1,303 words 1,303 nodes 103 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Uralic, Finnic</span>
-  </div>
-  <!-- end of Veps accordion row -->
-
-  <!-- start of Veps accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-vep">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-VEPS.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Veps</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,303 tokens 1,303 words 1,303 nodes 103 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Uralic, Finnic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Veps treebanks</h3>
 
     <!-- start of Veps treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Veps / VWT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-vep">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">VWT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,303 tokens 1,303 words 1,303 nodes 103 sentences">1K</span></span>
@@ -16041,8 +14629,8 @@ <h3>Veps treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.400366"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Veps-VWT is a manually annotated corpus of Veps made using the Universal dependencies annotation scheme. The data is collected from [VepKar corpora](http://dictorpus.krc.karelia.ru/en/corpus/text) and consists of mostly modern news texts written in Central Veps dialect.
 
@@ -16054,11 +14642,10 @@ <h3>Veps treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Veps / VWT entry -->
-      
-    </div> <!-- end of Veps treebank list -->
+    </details>
+    
+    <!-- end of Veps treebank list -->
 
     
 
@@ -16068,35 +14655,29 @@ <h3> Language documentation </h3>
     See the <a href="vep/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Veps accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Veps accordion row -->
 
   <!-- start of Vietnamese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/VN.svg" /></span>
-    <span class="doublewidespan">Vietnamese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="59,957 tokens 59,957 words 59,957 nodes 3,423 sentences">59K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news spoken"><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Austro-Asiatic, Viet-Muong</span>
-  </div>
-  <!-- end of Vietnamese accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-vi">
+      <span class="flagspan"><img class="flag" src="flags/svg/VN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Vietnamese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="59,957 tokens 59,957 words 59,957 nodes 3,423 sentences">59K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news spoken"><i class="fa fa-newspaper-o"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Austro-Asiatic, Viet-Muong</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Vietnamese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Vietnamese treebanks</h3>
 
     <!-- start of Vietnamese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Vietnamese / VTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-vi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">VTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="58,069 tokens 58,069 words 58,069 nodes 3,323 sentences">58K</span></span>
@@ -16105,8 +14686,8 @@ <h3>Vietnamese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005586"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Vietnamese UD treebank is a conversion of the constituent treebank created in the VLSP project
 (https://vlsp.hpda.vn/).
@@ -16119,12 +14700,11 @@ <h3>Vietnamese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Vietnamese / VTB entry -->
-      
-      <!-- start of Vietnamese / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-vi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,888 tokens 1,888 words 1,888 nodes 100 sentences">1K</span></span>
@@ -16133,8 +14713,8 @@ <h3>Vietnamese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003766"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This treebank includes a set of sentences from [OPUS](https://opus.nlpl.eu/),
 sourced from subtitles, talks, and educational videos.
@@ -16147,11 +14727,10 @@ <h3>Vietnamese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Vietnamese / TueCL entry -->
-      
-    </div> <!-- end of Vietnamese treebank list -->
+    </details>
+    
+    <!-- end of Vietnamese treebank list -->
 
     
     See <a href="treebanks/vi-comparison.html">here</a> for comparative statistics of Vietnamese treebanks.
@@ -16163,35 +14742,29 @@ <h3> Language documentation </h3>
     See the <a href="vi/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Vietnamese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Vietnamese accordion row -->
 
   <!-- start of Warlpiri accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AU-ABORIGINAL.svg" /></span>
-    <span class="doublewidespan">Warlpiri</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="306 tokens 315 words 315 nodes 55 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Pama-Nyungan, Western</span>
-  </div>
-  <!-- end of Warlpiri accordion row -->
-
-  <!-- start of Warlpiri accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-wbp">
+      <span class="flagspan"><img class="flag" src="flags/svg/AU-ABORIGINAL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Warlpiri</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="306 tokens 315 words 315 nodes 55 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Pama-Nyungan, Western</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Warlpiri treebanks</h3>
 
     <!-- start of Warlpiri treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Warlpiri / UFAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-wbp">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UFAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="306 tokens 315 words 315 nodes 55 sentences">&lt;1K</span></span>
@@ -16200,8 +14773,8 @@ <h3>Warlpiri treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003235"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A small treebank of grammatical examples in Warlpiri, taken from linguistic literature.
 
@@ -16213,11 +14786,10 @@ <h3>Warlpiri treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Warlpiri / UFAL entry -->
-      
-    </div> <!-- end of Warlpiri treebank list -->
+    </details>
+    
+    <!-- end of Warlpiri treebank list -->
 
     
 
@@ -16227,35 +14799,29 @@ <h3> Language documentation </h3>
     See the <a href="wbp/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Warlpiri accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Warlpiri accordion row -->
 
   <!-- start of Welsh accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GB-WLS.svg" /></span>
-    <span class="doublewidespan">Welsh</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="53,842 tokens 54,712 words 54,712 nodes 2,717 sentences">54K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Celtic</span>
-  </div>
-  <!-- end of Welsh accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-cy">
+      <span class="flagspan"><img class="flag" src="flags/svg/GB-WLS.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Welsh</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="53,842 tokens 54,712 words 54,712 nodes 2,717 sentences">54K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Celtic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Welsh accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Welsh treebanks</h3>
 
     <!-- start of Welsh treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Welsh / CCG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-cy">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CCG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="53,842 tokens 54,712 words 54,712 nodes 2,717 sentences">54K</span></span>
@@ -16264,8 +14830,8 @@ <h3>Welsh treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples news nonfiction wiki"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.644374"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Welsh-CCG (Corpws Cystrawennol y Gymraeg) is a treebank of Welsh,
 annotated according to the Universal Dependencies guidelines.
@@ -16278,11 +14844,10 @@ <h3>Welsh treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Welsh / CCG entry -->
-      
-    </div> <!-- end of Welsh treebank list -->
+    </details>
+    
+    <!-- end of Welsh treebank list -->
 
     
 
@@ -16292,35 +14857,29 @@ <h3> Language documentation </h3>
     See the <a href="cy/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Welsh accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Welsh accordion row -->
 
   <!-- start of Western Armenian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AM.svg" /></span>
-    <span class="doublewidespan">Western Armenian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="121,432 tokens 122,752 words 122,752 nodes 6,644 sentences">122K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction reviews social spoken web wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Armenian</span>
-  </div>
-  <!-- end of Western Armenian accordion row -->
-
-  <!-- start of Western Armenian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-hyw">
+      <span class="flagspan"><img class="flag" src="flags/svg/AM.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Western Armenian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="121,432 tokens 122,752 words 122,752 nodes 6,644 sentences">122K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction reviews social spoken web wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Armenian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Western Armenian treebanks</h3>
 
     <!-- start of Western Armenian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Western Armenian / ArmTDP entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-hyw">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ArmTDP</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="121,432 tokens 122,752 words 122,752 nodes 6,644 sentences">122K</span></span>
@@ -16329,8 +14888,8 @@ <h3>Western Armenian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog fiction news nonfiction reviews social spoken web wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-thumbs-o-up"></i><i class="fa fa-feed"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.825973"><img src="/img/stars40.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies treebank for Western Armenian was developed for UD originally by the ArmTDP team led by Marat M. Yavrumyan at the Yerevan State University.
 
@@ -16342,11 +14901,10 @@ <h3>Western Armenian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Western Armenian / ArmTDP entry -->
-      
-    </div> <!-- end of Western Armenian treebank list -->
+    </details>
+    
+    <!-- end of Western Armenian treebank list -->
 
     
 
@@ -16356,35 +14914,29 @@ <h3> Language documentation </h3>
     See the <a href="hyw/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Western Armenian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Western Armenian accordion row -->
 
   <!-- start of Western Sierra Puebla Nahuatl accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" /></span>
-    <span class="doublewidespan">Western S.P. Nahuatl</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="19,191 tokens 19,535 words 19,551 nodes 3,024 sentences">19K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Uto-Aztecan</span>
-  </div>
-  <!-- end of Western Sierra Puebla Nahuatl accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-nhi">
+      <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Western S.P. Nahuatl</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="19,191 tokens 19,535 words 19,551 nodes 3,024 sentences">19K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Uto-Aztecan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Western Sierra Puebla Nahuatl accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Western Sierra Puebla Nahuatl treebanks</h3>
 
     <!-- start of Western Sierra Puebla Nahuatl treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Western Sierra Puebla Nahuatl / MesoTree entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-nhi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MesoTree</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,191 tokens 19,535 words 19,551 nodes 3,024 sentences">19K</span></span>
@@ -16393,8 +14945,8 @@ <h3>Western Sierra Puebla Nahuatl treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.560358"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Western Sierra Puebla Nahuatl-MesoTree is a combination of the existing UD Western Sierra Puebla Nahuatl-IU treebank (ITML) (with some updates to annotations due to caught errors or changes annotation decisions) and new sentences annotated as part of the NSF-funded project, &#34;Syntactically-annotated corpora for endangered languages in areal contact&#34; (MesoTree).
 
@@ -16406,11 +14958,10 @@ <h3>Western Sierra Puebla Nahuatl treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Western Sierra Puebla Nahuatl / MesoTree entry -->
-      
-    </div> <!-- end of Western Sierra Puebla Nahuatl treebank list -->
+    </details>
+    
+    <!-- end of Western Sierra Puebla Nahuatl treebank list -->
 
     
 
@@ -16420,35 +14971,29 @@ <h3> Language documentation </h3>
     See the <a href="nhi/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Western Sierra Puebla Nahuatl accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Western Sierra Puebla Nahuatl accordion row -->
 
   <!-- start of Wolof accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SN.svg" /></span>
-    <span class="doublewidespan">Wolof</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="42,832 tokens 44,258 words 44,258 nodes 2,107 sentences">44K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible wiki"><i class="fa fa-cloud"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Niger-Congo, Northern Atlantic</span>
-  </div>
-  <!-- end of Wolof accordion row -->
-
-  <!-- start of Wolof accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-wo">
+      <span class="flagspan"><img class="flag" src="flags/svg/SN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Wolof</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="42,832 tokens 44,258 words 44,258 nodes 2,107 sentences">44K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible wiki"><i class="fa fa-cloud"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Niger-Congo, Northern Atlantic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Wolof treebanks</h3>
 
     <!-- start of Wolof treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Wolof / WTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-wo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">WTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="42,832 tokens 44,258 words 44,258 nodes 2,107 sentences">44K</span></span>
@@ -16457,8 +15002,8 @@ <h3>Wolof treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible wiki"><i class="fa fa-cloud"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.709519"><img src="/img/stars35.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Wolof-WTB is a natively manual developed treebank for Wolof. Sentences were collected from encyclopedic, fictional, biographical, religious texts and news.
 
@@ -16470,11 +15015,10 @@ <h3>Wolof treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Wolof / WTB entry -->
-      
-    </div> <!-- end of Wolof treebank list -->
+    </details>
+    
+    <!-- end of Wolof treebank list -->
 
     
 
@@ -16484,35 +15028,29 @@ <h3> Language documentation </h3>
     See the <a href="wo/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Wolof accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Wolof accordion row -->
 
   <!-- start of Xavante accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Xavante</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,229 tokens 2,239 words 2,239 nodes 248 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Macro-Je</span>
-  </div>
-  <!-- end of Xavante accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-xav">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Xavante</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,229 tokens 2,239 words 2,239 nodes 248 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Macro-Je</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Xavante accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Xavante treebanks</h3>
 
     <!-- start of Xavante treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Xavante / XDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-xav">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">XDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,229 tokens 2,239 words 2,239 nodes 248 sentences">2K</span></span>
@@ -16521,8 +15059,8 @@ <h3>Xavante treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003929"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Xavante-XDT is a collection of annotated sentences in [Xavante](https://glottolog.org/resource/languoid/id/xava1240). Sentence annotation and documentation by [Fabrício Ferraz Gerardi](http://languagestructure.github.io/), Ivan Roksandic.
 
@@ -16534,11 +15072,10 @@ <h3>Xavante treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Xavante / XDT entry -->
-      
-    </div> <!-- end of Xavante treebank list -->
+    </details>
+    
+    <!-- end of Xavante treebank list -->
 
     
 
@@ -16548,35 +15085,29 @@ <h3> Language documentation </h3>
     See the <a href="xav/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Xavante accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Xavante accordion row -->
 
   <!-- start of Xibe accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" /></span>
-    <span class="doublewidespan">Xibe</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="15,401 tokens 15,401 words 15,401 nodes 810 sentences">15K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples news"><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Tungusic</span>
-  </div>
-  <!-- end of Xibe accordion row -->
-
-  <!-- start of Xibe accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sjo">
+      <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Xibe</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="15,401 tokens 15,401 words 15,401 nodes 810 sentences">15K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples news"><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Tungusic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Xibe treebanks</h3>
 
     <!-- start of Xibe treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Xibe / XDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sjo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">XDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="15,401 tokens 15,401 words 15,401 nodes 810 sentences">15K</span></span>
@@ -16585,8 +15116,8 @@ <h3>Xibe treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples news"><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 3.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.005520"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Xibe Treebank is a corpus of the Xibe language (ISO 639-3: *sjo*) containing manually annotated syntactic trees under the Universal Dependencies. Sentences come from three sources: grammar book examples, newspaper (Cabcal News) and Xibe textbooks.
 
@@ -16598,11 +15129,10 @@ <h3>Xibe treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Xibe / XDT entry -->
-      
-    </div> <!-- end of Xibe treebank list -->
+    </details>
+    
+    <!-- end of Xibe treebank list -->
 
     
 
@@ -16612,35 +15142,29 @@ <h3> Language documentation </h3>
     See the <a href="sjo/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Xibe accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Xibe accordion row -->
 
   <!-- start of Yakut accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-SA.svg" /></span>
-    <span class="doublewidespan">Yakut</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,459 tokens 1,460 words 1,460 nodes 299 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Turkic, Northeastern</span>
-  </div>
-  <!-- end of Yakut accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-sah">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-SA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Yakut</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,459 tokens 1,460 words 1,460 nodes 299 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Turkic, Northeastern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Yakut accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Yakut treebanks</h3>
 
     <!-- start of Yakut treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Yakut / YKTDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-sah">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">YKTDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,459 tokens 1,460 words 1,460 nodes 299 sentences">1K</span></span>
@@ -16649,8 +15173,8 @@ <h3>Yakut treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004252"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Yakut-YKTDT is a collection Yakut ([Sakha]) sentences (https://glottolog.org/resource/languoid/id/yaku1245). The project is work-in-progress and the treebank is being updated on a regular basis.
 
@@ -16662,11 +15186,10 @@ <h3>Yakut treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Yakut / YKTDT entry -->
-      
-    </div> <!-- end of Yakut treebank list -->
+    </details>
+    
+    <!-- end of Yakut treebank list -->
 
     
 
@@ -16676,35 +15199,29 @@ <h3> Language documentation </h3>
     See the <a href="sah/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Yakut accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Yakut accordion row -->
 
   <!-- start of Yiddish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/YIDDISH.svg" /></span>
-    <span class="doublewidespan">Yiddish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="27,954 tokens 28,348 words 28,348 nodes 3,113 sentences">28K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples learner-essays nonfiction spoken web wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Yiddish accordion row -->
-
-  <!-- start of Yiddish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-yi">
+      <span class="flagspan"><img class="flag" src="flags/svg/YIDDISH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Yiddish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="27,954 tokens 28,348 words 28,348 nodes 3,113 sentences">28K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples learner-essays nonfiction spoken web wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Yiddish treebanks</h3>
 
     <!-- start of Yiddish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Yiddish / YiTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-yi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">YiTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="27,954 tokens 28,348 words 28,348 nodes 3,113 sentences">28K</span></span>
@@ -16713,8 +15230,8 @@ <h3>Yiddish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible fiction grammar-examples learner-essays nonfiction spoken web wiki"><i class="fa fa-cloud"></i><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-edit"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i><i class="fa fa-globe"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.545794"><img src="/img/stars25.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         YiTB is a treebank of linguistically annotated Yiddish data in the Universal Dependencies framework, created via a bootstraping machine learning method. A total of 27,872 tokens are currently in the treebank from a variety of sources and textual genres.
 
@@ -16726,11 +15243,10 @@ <h3>Yiddish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Yiddish / YiTB entry -->
-      
-    </div> <!-- end of Yiddish treebank list -->
+    </details>
+    
+    <!-- end of Yiddish treebank list -->
 
     
 
@@ -16740,35 +15256,29 @@ <h3> Language documentation </h3>
     See the <a href="yi/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Yiddish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Yiddish accordion row -->
 
   <!-- start of Yoruba accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NG.svg" /></span>
-    <span class="doublewidespan">Yoruba</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="8,198 tokens 8,243 words 8,243 nodes 317 sentences">8K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible wiki"><i class="fa fa-cloud"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Niger-Congo, Defoid</span>
-  </div>
-  <!-- end of Yoruba accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-yo">
+      <span class="flagspan"><img class="flag" src="flags/svg/NG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Yoruba</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="8,198 tokens 8,243 words 8,243 nodes 317 sentences">8K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible wiki"><i class="fa fa-cloud"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Niger-Congo, Defoid</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Yoruba accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Yoruba treebanks</h3>
 
     <!-- start of Yoruba treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Yoruba / YTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-yo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">YTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="8,198 tokens 8,243 words 8,243 nodes 317 sentences">8K</span></span>
@@ -16777,8 +15287,8 @@ <h3>Yoruba treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible wiki"><i class="fa fa-cloud"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.004778"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Parts of the Yoruba Bible and of the Yoruba edition of Wikipedia, hand-annotated natively in Universal Dependencies.
 
@@ -16790,11 +15300,10 @@ <h3>Yoruba treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Yoruba / YTB entry -->
-      
-    </div> <!-- end of Yoruba treebank list -->
+    </details>
+    
+    <!-- end of Yoruba treebank list -->
 
     
 
@@ -16804,35 +15313,29 @@ <h3> Language documentation </h3>
     See the <a href="yo/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Yoruba accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Yoruba accordion row -->
 
   <!-- start of Yupik accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/US-AK.svg" /></span>
-    <span class="doublewidespan">Yupik</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,221 tokens 2,568 words 2,568 nodes 309 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Eskimo-Aleut</span>
-  </div>
-  <!-- end of Yupik accordion row -->
-
-  <!-- start of Yupik accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-ess">
+      <span class="flagspan"><img class="flag" src="flags/svg/US-AK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Yupik</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,221 tokens 2,568 words 2,568 nodes 309 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Eskimo-Aleut</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Yupik treebanks</h3>
 
     <!-- start of Yupik treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Yupik / SLI entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-ess">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SLI</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,221 tokens 2,568 words 2,568 nodes 309 sentences">2K</span></span>
@@ -16841,8 +15344,8 @@ <h3>Yupik treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003961"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Yupik-SLI is a treebank of St. Lawrence Island Yupik (ISO 639-3: ess) that has been manually annotated at the morpheme level, based on a finite-state morphological analyzer by [Chen et al., 2020](https://www.aclweb.org/anthology/2020.lrec-1.326).
 The word-level annotation, merging multiword expressions, is provided in not-to-release/ess_sli-ud-test.merged.conllu.
@@ -16856,11 +15359,10 @@ <h3>Yupik treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Yupik / SLI entry -->
-      
-    </div> <!-- end of Yupik treebank list -->
+    </details>
+    
+    <!-- end of Yupik treebank list -->
 
     
 
@@ -16870,35 +15372,29 @@ <h3> Language documentation </h3>
     See the <a href="ess/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Yupik accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Yupik accordion row -->
 
   <!-- start of Zaar accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NG.svg" /></span>
-    <span class="doublewidespan">Zaar</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="19,629 tokens 20,952 words 20,952 nodes 2,105 sentences">20K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, West Chadic</span>
-  </div>
-  <!-- end of Zaar accordion row -->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-say">
+      <span class="flagspan"><img class="flag" src="flags/svg/NG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Zaar</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="19,629 tokens 20,952 words 20,952 nodes 2,105 sentences">20K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, West Chadic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Zaar accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Zaar treebanks</h3>
 
     <!-- start of Zaar treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Zaar / Autogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-say">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Autogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,629 tokens 20,952 words 20,952 nodes 2,105 sentences">20K</span></span>
@@ -16907,8 +15403,8 @@ <h3>Zaar treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.586255"><img src="/img/stars30.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A Universal Dependencies corpus for Zaar (aka Sayanci), a member of the Chadic branch of the Afro-Asiatic phylum. The language is mainly spoken by about 200,000 speakers in the Bogoro and Tafawa Balewa local governments of Bauchi State, Nigeria.
 
@@ -16920,11 +15416,10 @@ <h3>Zaar treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Zaar / Autogramm entry -->
-      
-    </div> <!-- end of Zaar treebank list -->
+    </details>
+    
+    <!-- end of Zaar treebank list -->
 
     
 
@@ -16934,35 +15429,29 @@ <h3> Language documentation </h3>
     See the <a href="say/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Zaar accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Zaar accordion row -->
 
   <!-- start of Zazaki accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" /></span>
-    <span class="doublewidespan">Zazaki</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,371 tokens 1,441 words 1,441 nodes 200 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Zazaki accordion row -->
-
-  <!-- start of Zazaki accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-current">
+    <summary id="language-zza">
+      <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Zazaki</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,371 tokens 1,441 words 1,441 nodes 200 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Zazaki treebanks</h3>
 
     <!-- start of Zazaki treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Zazaki / ZSD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-current-zza">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ZSD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,371 tokens 1,441 words 1,441 nodes 200 sentences">1K</span></span>
@@ -16971,8 +15460,8 @@ <h3>Zazaki treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.440386"><img src="/img/stars20.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         A dependency treebank in Universal Dependencies (UD) format for Zazakî (Kirmanckî), based on transcribed spoken interviews recorded in situ in Dêrsim (Turk. Tunceli) for the forthcoming documentary &#34;KUTENE – Last Dots of Dêrsim&#34;. It provides manually verified POS tags, morphological features, and dependency relations.
 
@@ -16984,11 +15473,10 @@ <h3>Zazaki treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Zazaki / ZSD entry -->
-      
-    </div> <!-- end of Zazaki treebank list -->
+    </details>
+    
+    <!-- end of Zazaki treebank list -->
 
     
 
@@ -16998,6 +15486,7 @@ <h3> Language documentation </h3>
     See the <a href="zza/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Zazaki accordion body -->
+    </div>
+  </details>
+  <!-- end of Zazaki accordion row -->
 
diff --git a/_includes/at_glance_retired.html b/_includes/at_glance_retired.html
index b85882d2f9..d445674dc1 100644
--- a/_includes/at_glance_retired.html
+++ b/_includes/at_glance_retired.html
@@ -1,29 +1,22 @@
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
-
   <!-- start of English accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GB.svg" /></span>
-    <span class="doublewidespan">English</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="97,681 tokens 97,681 words 97,681 nodes 5,124 sentences">97K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of English accordion row -->
-
-  <!-- start of English accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-en">
+      <span class="flagspan"><img class="flag" src="flags/svg/GB.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">English</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="97,681 tokens 97,681 words 97,681 nodes 5,124 sentences">97K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>English treebanks</h3>
 
     <!-- start of English treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of English / ESL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-en">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ESL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="97,681 tokens 97,681 words 97,681 nodes 5,124 sentences">97K</span></span>
@@ -32,8 +25,8 @@ <h3>English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000355"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD English-ESL / Treebank of Learner English (TLE) contains manual POS tag and dependency annotations for 5,124 English as a Second Language (ESL) sentences drawn from the Cambridge Learner Corpus First Certificate in English (FCE) dataset.
 
@@ -45,11 +38,10 @@ <h3>English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of English / ESL entry -->
-      
-    </div> <!-- end of English treebank list -->
+    </details>
+    
+    <!-- end of English treebank list -->
 
     
     See <a href="treebanks/en-comparison.html">here</a> for comparative statistics of English treebanks.
@@ -61,35 +53,29 @@ <h3> Language documentation </h3>
     See the <a href="en/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of English accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of English accordion row -->
 
   <!-- start of French accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" /></span>
-    <span class="doublewidespan">French</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="556,064 tokens 573,370 words 573,370 nodes 18,535 sentences">573K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of French accordion row -->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-fr">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">French</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="556,064 tokens 573,370 words 573,370 nodes 18,535 sentences">573K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of French accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>French treebanks</h3>
 
     <!-- start of French treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of French / FTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">FTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="556,064 tokens 573,370 words 573,370 nodes 18,535 sentences">573K</span></span>
@@ -98,8 +84,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="LGPL-LR"><img class="license" src="logos/gpl.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000612"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Universal Dependency version of the French Treebank (Abeillé et al., 2003), hereafter UD_French-FTB, is a treebank of sentences from the newspaper Le Monde, initially manually annotated with morphological information and phrase-structure and then converted to the Universal Dependencies annotation scheme.
 
@@ -111,11 +97,10 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / FTB entry -->
-      
-    </div> <!-- end of French treebank list -->
+    </details>
+    
+    <!-- end of French treebank list -->
 
     
     See <a href="treebanks/fr-comparison.html">here</a> for comparative statistics of French treebanks.
@@ -127,35 +112,29 @@ <h3> Language documentation </h3>
     See the <a href="fr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of French accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of French accordion row -->
 
   <!-- start of Hindi English accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Hindi English</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="26,909 tokens 26,909 words 26,909 nodes 1,898 sentences">26K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
-    <span class="triplewidespan">Code switching</span>
-  </div>
-  <!-- end of Hindi English accordion row -->
-
-  <!-- start of Hindi English accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-qhe">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Hindi English</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="26,909 tokens 26,909 words 26,909 nodes 1,898 sentences">26K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
+      <span class="triplewidespan">Code switching</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Hindi English treebanks</h3>
 
     <!-- start of Hindi English treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Hindi English / HIENCS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-qhe">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HIENCS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="26,909 tokens 26,909 words 26,909 nodes 1,898 sentences">26K</span></span>
@@ -164,8 +143,8 @@ <h3>Hindi English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000277"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Hindi-English Code-switching treebank is based on code-switching tweets of Hindi and English multilingual speakers (mostly Indian) on Twitter. The treebank is manually annotated using UD sceheme. The training and evaluations sets were seperately annotated by different annotators using UD v2 and v1 guidelines respectively. The evaluation sets are automatically converted from UD v1 to v2.
 
@@ -177,11 +156,10 @@ <h3>Hindi English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hindi English / HIENCS entry -->
-      
-    </div> <!-- end of Hindi English treebank list -->
+    </details>
+    
+    <!-- end of Hindi English treebank list -->
 
     
 
@@ -191,35 +169,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Hindi English accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Hindi English accordion row -->
 
   <!-- start of Japanese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/JP.svg" /></span>
-    <span class="doublewidespan">Japanese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="204,437 tokens 204,437 words 204,437 nodes 7,980 sentences">204K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Japanese</span>
-  </div>
-  <!-- end of Japanese accordion row -->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-ja">
+      <span class="flagspan"><img class="flag" src="flags/svg/JP.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Japanese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="204,437 tokens 204,437 words 204,437 nodes 7,980 sentences">204K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Japanese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Japanese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Japanese treebanks</h3>
 
     <!-- start of Japanese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Japanese / Modern entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Modern</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="14,494 tokens 14,494 words 14,494 nodes 822 sentences">14K</span></span>
@@ -228,8 +200,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-ND 3.0"><img class="license" src="logos/by-nc-nd.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.002899"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Universal Dependencies (UD) Japanese treebank is based on the definition of
 UD Japanese convention described in the UD documentation.
@@ -243,12 +215,11 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / Modern entry -->
-      
-      <!-- start of Japanese / KTC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KTC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="189,943 tokens 189,943 words 189,943 nodes 7,158 sentences">189K</span></span>
@@ -257,8 +228,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000347"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Please add a summary section to the treebank readme file
 
@@ -270,11 +241,10 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / KTC entry -->
-      
-    </div> <!-- end of Japanese treebank list -->
+    </details>
+    
+    <!-- end of Japanese treebank list -->
 
     
     See <a href="treebanks/ja-comparison.html">here</a> for comparative statistics of Japanese treebanks.
@@ -286,35 +256,29 @@ <h3> Language documentation </h3>
     See the <a href="ja/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Japanese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Japanese accordion row -->
 
   <!-- start of Khunsari accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" /></span>
-    <span class="doublewidespan">Khunsari</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="74 tokens 74 words 74 nodes 10 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Khunsari accordion row -->
-
-  <!-- start of Khunsari accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-kfm">
+      <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Khunsari</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="74 tokens 74 words 74 nodes 10 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Khunsari treebanks</h3>
 
     <!-- start of Khunsari treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Khunsari / AHA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-kfm">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AHA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="74 tokens 74 words 74 nodes 10 sentences">&lt;1K</span></span>
@@ -323,8 +287,8 @@ <h3>Khunsari treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003583"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The AHA Khunsari Treebank is a small treebank for contemporary Khunsari. Its corpus is collected and annotated manually. We have prepared this treebank based on interviews with Khunsari speakers.
 
@@ -336,11 +300,10 @@ <h3>Khunsari treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Khunsari / AHA entry -->
-      
-    </div> <!-- end of Khunsari treebank list -->
+    </details>
+    
+    <!-- end of Khunsari treebank list -->
 
     
 
@@ -350,35 +313,29 @@ <h3> Language documentation </h3>
     See the <a href="kfm/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Khunsari accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Khunsari accordion row -->
 
   <!-- start of Mbya Guarani accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PY.svg" /></span>
-    <span class="doublewidespan">Mbya Guarani</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="11,771 tokens 11,771 words 11,771 nodes 1,046 sentences">11K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Tupian, Maweti-Guarani</span>
-  </div>
-  <!-- end of Mbya Guarani accordion row -->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-gun">
+      <span class="flagspan"><img class="flag" src="flags/svg/PY.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Mbya Guarani</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="11,771 tokens 11,771 words 11,771 nodes 1,046 sentences">11K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Tupian, Maweti-Guarani</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Mbya Guarani accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Mbya Guarani treebanks</h3>
 
     <!-- start of Mbya Guarani treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Mbya Guarani / Dooley entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-gun">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Dooley</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="11,771 tokens 11,771 words 11,771 nodes 1,046 sentences">11K</span></span>
@@ -387,8 +344,8 @@ <h3>Mbya Guarani treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000214"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Mbya_Guarani-Dooley is a corpus of narratives written in Mbyá Guaraní (Tupian) in Brazil, and collected by Robert Dooley. Due to copyright restrictions, the corpus that is distributed as part of UD only contains the annotation (tags, features, relations) while the FORM and LEMMA columns are empty.
 
@@ -400,11 +357,10 @@ <h3>Mbya Guarani treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Mbya Guarani / Dooley entry -->
-      
-    </div> <!-- end of Mbya Guarani treebank list -->
+    </details>
+    
+    <!-- end of Mbya Guarani treebank list -->
 
     
     See <a href="treebanks/gun-comparison.html">here</a> for comparative statistics of Mbya Guarani treebanks.
@@ -416,35 +372,29 @@ <h3> Language documentation </h3>
     See the <a href="gun/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Mbya Guarani accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Mbya Guarani accordion row -->
 
   <!-- start of Nayini accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" /></span>
-    <span class="doublewidespan">Nayini</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="78 tokens 78 words 78 nodes 10 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Nayini accordion row -->
-
-  <!-- start of Nayini accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-nyq">
+      <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Nayini</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="78 tokens 78 words 78 nodes 10 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Nayini treebanks</h3>
 
     <!-- start of Nayini treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Nayini / AHA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-nyq">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AHA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="78 tokens 78 words 78 nodes 10 sentences">&lt;1K</span></span>
@@ -453,8 +403,8 @@ <h3>Nayini treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.003583"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The AHA Nayini Treebank is a small treebank for contemporary Nayini. Its corpus is collected and annotated manually. We have prepared this treebank based on interviews with Nayini speakers.
 
@@ -466,11 +416,10 @@ <h3>Nayini treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Nayini / AHA entry -->
-      
-    </div> <!-- end of Nayini treebank list -->
+    </details>
+    
+    <!-- end of Nayini treebank list -->
 
     
 
@@ -480,35 +429,29 @@ <h3> Language documentation </h3>
     See the <a href="nyq/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Nayini accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Nayini accordion row -->
 
   <!-- start of Norwegian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NO.svg" /></span>
-    <span class="doublewidespan">Norwegian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="55,410 tokens 55,410 words 55,410 nodes 5,250 sentences">55K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Norwegian accordion row -->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-no">
+      <span class="flagspan"><img class="flag" src="flags/svg/NO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Norwegian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="55,410 tokens 55,410 words 55,410 nodes 5,250 sentences">55K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Norwegian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Norwegian treebanks</h3>
 
     <!-- start of Norwegian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Norwegian / NynorskLIA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-no">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">NynorskLIA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="55,410 tokens 55,410 words 55,410 nodes 5,250 sentences">55K</span></span>
@@ -517,8 +460,8 @@ <h3>Norwegian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.006970"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Norwegian treebank is based on the LIA treebank of transcribed spoken Norwegian dialects.
 The treebank has been automatically converted to the UD scheme by Lilja Øvrelid at the University of Oslo.
@@ -531,11 +474,10 @@ <h3>Norwegian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Norwegian / NynorskLIA entry -->
-      
-    </div> <!-- end of Norwegian treebank list -->
+    </details>
+    
+    <!-- end of Norwegian treebank list -->
 
     
     See <a href="treebanks/no-comparison.html">here</a> for comparative statistics of Norwegian treebanks.
@@ -547,35 +489,29 @@ <h3> Language documentation </h3>
     See the <a href="no/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Norwegian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Norwegian accordion row -->
 
   <!-- start of Soi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" /></span>
-    <span class="doublewidespan">Soi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="55 tokens 55 words 55 nodes 8 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Soi accordion row -->
-
-  <!-- start of Soi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-retired">
+    <summary id="language-retired-soj">
+      <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Soi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="55 tokens 55 words 55 nodes 8 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Soi treebanks</h3>
 
     <!-- start of Soi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Soi / AHA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-retired-soj">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AHA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="55 tokens 55 words 55 nodes 8 sentences">&lt;1K</span></span>
@@ -584,8 +520,8 @@ <h3>Soi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.329638"><img src="/img/stars15.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The AHA Soi Treebank is a small treebank for contemporary Soi. Its corpus is collected and annotated manually. We have prepared this treebank based on interviews with Soi speakers.
 
@@ -597,11 +533,10 @@ <h3>Soi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Soi / AHA entry -->
-      
-    </div> <!-- end of Soi treebank list -->
+    </details>
+    
+    <!-- end of Soi treebank list -->
 
     
 
@@ -611,6 +546,7 @@ <h3> Language documentation </h3>
     See the <a href="soj/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Soi accordion body -->
+    </div>
+  </details>
+  <!-- end of Soi accordion row -->
 
diff --git a/_includes/at_glance_sapling.html b/_includes/at_glance_sapling.html
index 60db6ae7c8..8d083cbe39 100644
--- a/_includes/at_glance_sapling.html
+++ b/_includes/at_glance_sapling.html
@@ -1,29 +1,22 @@
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
-
   <!-- start of Akkadian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IQ.svg" /></span>
-    <span class="doublewidespan">Akkadian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="117,156 tokens 117,156 words 117,156 nodes 6,071 sentences">117K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Akkadian accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-akk">
+      <span class="flagspan"><img class="flag" src="flags/svg/IQ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Akkadian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="117,156 tokens 117,156 words 117,156 nodes 6,071 sentences">117K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Akkadian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Akkadian treebanks</h3>
 
     <!-- start of Akkadian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Akkadian / MCONG entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-akk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MCONG</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="117,156 tokens 117,156 words 117,156 nodes 6,071 sentences">117K</span></span>
@@ -32,8 +25,8 @@ <h3>Akkadian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Akkadian-MCONG is a treebank of normalized Akkadian sentences drawn mostly from Neo-Assyrian corpora lemmatized on [Oracc](http://oracc.museum.upenn.edu/). Sentences are annotated for lemma, syntactic dependencies, and morphological features. The treebank contains approximately 112,000 words.
 
@@ -45,11 +38,10 @@ <h3>Akkadian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Akkadian / MCONG entry -->
-      
-    </div> <!-- end of Akkadian treebank list -->
+    </details>
+    
+    <!-- end of Akkadian treebank list -->
 
     
     See <a href="treebanks/akk-comparison.html">here</a> for comparative statistics of Akkadian treebanks.
@@ -61,35 +53,29 @@ <h3> Language documentation </h3>
     See the <a href="akk/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Akkadian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Akkadian accordion row -->
 
   <!-- start of Amharic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ET.svg" /></span>
-    <span class="doublewidespan">Amharic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="191 tokens 191 words 191 nodes 10 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED news nonfiction"><i class="fa fa-file-o"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Amharic accordion row -->
-
-  <!-- start of Amharic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-am">
+      <span class="flagspan"><img class="flag" src="flags/svg/ET.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Amharic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="191 tokens 191 words 191 nodes 10 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED news nonfiction"><i class="fa fa-file-o"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Amharic treebanks</h3>
 
     <!-- start of Amharic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Amharic / ADT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-am">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ADT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="191 tokens 191 words 191 nodes 10 sentences">&lt;1K</span></span>
@@ -98,8 +84,8 @@ <h3>Amharic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -111,12 +97,11 @@ <h3>Amharic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Amharic / ADT entry -->
-      
-      <!-- start of Amharic / Inku entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-am">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Inku</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -125,8 +110,8 @@ <h3>Amharic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -138,12 +123,11 @@ <h3>Amharic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Amharic / Inku entry -->
-      
-      <!-- start of Amharic / SAMTA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-am">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SAMTA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -152,8 +136,8 @@ <h3>Amharic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -165,11 +149,10 @@ <h3>Amharic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Amharic / SAMTA entry -->
-      
-    </div> <!-- end of Amharic treebank list -->
+    </details>
+    
+    <!-- end of Amharic treebank list -->
 
     
 
@@ -179,35 +162,29 @@ <h3> Language documentation </h3>
     See the <a href="am/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Amharic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Amharic accordion row -->
 
   <!-- start of Apalai accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Apalai</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="18 tokens 18 words 18 nodes 3 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Cariban</span>
-  </div>
-  <!-- end of Apalai accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-apy">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Apalai</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="18 tokens 18 words 18 nodes 3 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="bible grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Cariban</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Apalai accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Apalai treebanks</h3>
 
     <!-- start of Apalai treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Apalai / ADT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-apy">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ADT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="18 tokens 18 words 18 nodes 3 sentences">&lt;1K</span></span>
@@ -216,8 +193,8 @@ <h3>Apalai treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible grammar-examples nonfiction spoken"><i class="fa fa-cloud"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This Apalaí treebank is a collection of sentences from different sources, including own fieldwork material.
 
@@ -229,11 +206,10 @@ <h3>Apalai treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Apalai / ADT entry -->
-      
-    </div> <!-- end of Apalai treebank list -->
+    </details>
+    
+    <!-- end of Apalai treebank list -->
 
     
 
@@ -243,35 +219,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Apalai accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Apalai accordion row -->
 
   <!-- start of Balatipone accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Balatipone</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Bororoan</span>
-  </div>
-  <!-- end of Balatipone accordion row -->
-
-  <!-- start of Balatipone accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-umo">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Balatipone</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Bororoan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Balatipone treebanks</h3>
 
     <!-- start of Balatipone treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Balatipone / BDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-umo">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -280,8 +250,8 @@ <h3>Balatipone treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -293,11 +263,10 @@ <h3>Balatipone treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Balatipone / BDT entry -->
-      
-    </div> <!-- end of Balatipone treebank list -->
+    </details>
+    
+    <!-- end of Balatipone treebank list -->
 
     
 
@@ -307,35 +276,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Balatipone accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Balatipone accordion row -->
 
   <!-- start of Balochi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" /></span>
-    <span class="doublewidespan">Balochi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="Narratives Oral"><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Balochi accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-bal">
+      <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Balochi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="Narratives Oral"><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Balochi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Balochi treebanks</h3>
 
     <!-- start of Balochi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Balochi / Kessah entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-bal">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Kessah</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -344,8 +307,8 @@ <h3>Balochi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="Narratives Oral"><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Balochi-GPS is a treebank of the Balochi language variety spoken in southeastern Iran annotated according to the Universal Dependencies framework.
 
@@ -357,11 +320,10 @@ <h3>Balochi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Balochi / Kessah entry -->
-      
-    </div> <!-- end of Balochi treebank list -->
+    </details>
+    
+    <!-- end of Balochi treebank list -->
 
     
 
@@ -371,35 +333,29 @@ <h3> Language documentation </h3>
     See the <a href="bal/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Balochi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Balochi accordion row -->
 
   <!-- start of Bengali accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BD.svg" /></span>
-    <span class="doublewidespan">Bengali</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,330 tokens 2,339 words 2,339 nodes 252 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples literature news wiki"><i class="fa fa-magic"></i><i class="fa fa-file-o"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Bengali accordion row -->
-
-  <!-- start of Bengali accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-bn">
+      <span class="flagspan"><img class="flag" src="flags/svg/BD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Bengali</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,330 tokens 2,339 words 2,339 nodes 252 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples literature news wiki"><i class="fa fa-magic"></i><i class="fa fa-file-o"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Bengali treebanks</h3>
 
     <!-- start of Bengali treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Bengali / CMUPAN entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-bn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CMUPAN</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -408,8 +364,8 @@ <h3>Bengali treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -421,12 +377,11 @@ <h3>Bengali treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bengali / CMUPAN entry -->
-      
-      <!-- start of Bengali / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-bn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -435,8 +390,8 @@ <h3>Bengali treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks originally created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -450,12 +405,11 @@ <h3>Bengali treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bengali / PUD entry -->
-      
-      <!-- start of Bengali / Sabdakosh entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-bn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Sabdakosh</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,330 tokens 2,339 words 2,339 nodes 252 sentences">2K</span></span>
@@ -464,8 +418,8 @@ <h3>Bengali treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="literature"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Bengali-Sabdakosh is a corpus parsed sentences from contemporary Bengali prose, consisting of passages of up to 50 sentences from modern fiction.
 
@@ -477,11 +431,10 @@ <h3>Bengali treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Bengali / Sabdakosh entry -->
-      
-    </div> <!-- end of Bengali treebank list -->
+    </details>
+    
+    <!-- end of Bengali treebank list -->
 
     
 
@@ -491,35 +444,29 @@ <h3> Language documentation </h3>
     See the <a href="bn/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Bengali accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Bengali accordion row -->
 
   <!-- start of Central Romani accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ROMANI.svg" /></span>
-    <span class="doublewidespan">Central Romani</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Central Romani accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-rmc">
+      <span class="flagspan"><img class="flag" src="flags/svg/ROMANI.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Central Romani</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Central Romani accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Central Romani treebanks</h3>
 
     <!-- start of Central Romani treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Central Romani / Selice entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-rmc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Selice</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -528,8 +475,8 @@ <h3>Central Romani treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -541,11 +488,10 @@ <h3>Central Romani treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Central Romani / Selice entry -->
-      
-    </div> <!-- end of Central Romani treebank list -->
+    </details>
+    
+    <!-- end of Central Romani treebank list -->
 
     
 
@@ -555,35 +501,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Central Romani accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Central Romani accordion row -->
 
   <!-- start of Classical Nahuatl accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MX-NEWSPAIN.svg" /></span>
-    <span class="doublewidespan">Classical Nahuatl</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Uto-Aztecan</span>
-  </div>
-  <!-- end of Classical Nahuatl accordion row -->
-
-  <!-- start of Classical Nahuatl accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-nci">
+      <span class="flagspan"><img class="flag" src="flags/svg/MX-NEWSPAIN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Classical Nahuatl</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Uto-Aztecan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Classical Nahuatl treebanks</h3>
 
     <!-- start of Classical Nahuatl treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Classical Nahuatl / FloCo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-nci">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">FloCo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -592,8 +532,8 @@ <h3>Classical Nahuatl treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples nonfiction spoken"><i class="fa fa-book"></i><i class="fa fa-magic"></i><i class="fa fa-info-circle"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -605,11 +545,10 @@ <h3>Classical Nahuatl treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Classical Nahuatl / FloCo entry -->
-      
-    </div> <!-- end of Classical Nahuatl treebank list -->
+    </details>
+    
+    <!-- end of Classical Nahuatl treebank list -->
 
     
 
@@ -619,35 +558,29 @@ <h3> Language documentation </h3>
     See the <a href="nci/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Classical Nahuatl accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Classical Nahuatl accordion row -->
 
   <!-- start of Corsican accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR-COR.svg" /></span>
-    <span class="doublewidespan">Corsican</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Corsican accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-co">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR-COR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Corsican</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Corsican accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Corsican treebanks</h3>
 
     <!-- start of Corsican treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Corsican / DIVITAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-co">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DIVITAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -656,8 +589,8 @@ <h3>Corsican treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -669,11 +602,10 @@ <h3>Corsican treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Corsican / DIVITAL entry -->
-      
-    </div> <!-- end of Corsican treebank list -->
+    </details>
+    
+    <!-- end of Corsican treebank list -->
 
     
 
@@ -683,35 +615,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Corsican accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Corsican accordion row -->
 
   <!-- start of Cuicatec accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" /></span>
-    <span class="doublewidespan">Cuicatec</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Oto-Manguean</span>
-  </div>
-  <!-- end of Cuicatec accordion row -->
-
-  <!-- start of Cuicatec accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-cux">
+      <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Cuicatec</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Oto-Manguean</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Cuicatec treebanks</h3>
 
     <!-- start of Cuicatec treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Cuicatec / MesoTree entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-cux">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MesoTree</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -720,8 +646,8 @@ <h3>Cuicatec treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -733,11 +659,10 @@ <h3>Cuicatec treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Cuicatec / MesoTree entry -->
-      
-    </div> <!-- end of Cuicatec treebank list -->
+    </details>
+    
+    <!-- end of Cuicatec treebank list -->
 
     
 
@@ -747,35 +672,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Cuicatec accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Cuicatec accordion row -->
 
   <!-- start of Cusco Quechua accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PE.svg" /></span>
-    <span class="doublewidespan">Cusco Quechua</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Quechuan</span>
-  </div>
-  <!-- end of Cusco Quechua accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-quz">
+      <span class="flagspan"><img class="flag" src="flags/svg/PE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Cusco Quechua</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Quechuan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Cusco Quechua accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Cusco Quechua treebanks</h3>
 
     <!-- start of Cusco Quechua treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Cusco Quechua / Squoia entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-quz">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Squoia</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -784,8 +703,8 @@ <h3>Cusco Quechua treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -797,11 +716,10 @@ <h3>Cusco Quechua treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Cusco Quechua / Squoia entry -->
-      
-    </div> <!-- end of Cusco Quechua treebank list -->
+    </details>
+    
+    <!-- end of Cusco Quechua treebank list -->
 
     
 
@@ -811,35 +729,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Cusco Quechua accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Cusco Quechua accordion row -->
 
   <!-- start of Czech accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CZ.svg" /></span>
-    <span class="doublewidespan">Czech</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Czech accordion row -->
-
-  <!-- start of Czech accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-cs">
+      <span class="flagspan"><img class="flag" src="flags/svg/CZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Czech</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Czech treebanks</h3>
 
     <!-- start of Czech treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Czech / CzeSL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-cs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CzeSL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -848,8 +760,8 @@ <h3>Czech treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="learner-essays"><i class="fa fa-edit"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Morphosyntactic annotation of 1600 sentences from the Czesl-MAN corpus (Czech as a second language).
 
@@ -861,11 +773,10 @@ <h3>Czech treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Czech / CzeSL entry -->
-      
-    </div> <!-- end of Czech treebank list -->
+    </details>
+    
+    <!-- end of Czech treebank list -->
 
     
     See <a href="treebanks/cs-comparison.html">here</a> for comparative statistics of Czech treebanks.
@@ -877,35 +788,29 @@ <h3> Language documentation </h3>
     See the <a href="cs/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Czech accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Czech accordion row -->
 
   <!-- start of Dargwa accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-DA.svg" /></span>
-    <span class="doublewidespan">Dargwa</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Nakh-Daghestanian, Lak-Dargwa</span>
-  </div>
-  <!-- end of Dargwa accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-dar">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-DA.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Dargwa</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Nakh-Daghestanian, Lak-Dargwa</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Dargwa accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Dargwa treebanks</h3>
 
     <!-- start of Dargwa treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Dargwa / Mehweb entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-dar">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Mehweb</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -914,8 +819,8 @@ <h3>Dargwa treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-NC-SA 4.0"><img class="license" src="logos/by-nc-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -927,11 +832,10 @@ <h3>Dargwa treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Dargwa / Mehweb entry -->
-      
-    </div> <!-- end of Dargwa treebank list -->
+    </details>
+    
+    <!-- end of Dargwa treebank list -->
 
     
 
@@ -941,35 +845,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Dargwa accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Dargwa accordion row -->
 
   <!-- start of Enawene Nawe accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" /></span>
-    <span class="doublewidespan">Enawene Nawe</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">Arawakan, Central Arawakan</span>
-  </div>
-  <!-- end of Enawene Nawe accordion row -->
-
-  <!-- start of Enawene Nawe accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-unk">
+      <span class="flagspan"><img class="flag" src="flags/svg/BR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Enawene Nawe</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">Arawakan, Central Arawakan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Enawene Nawe treebanks</h3>
 
     <!-- start of Enawene Nawe treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Enawene Nawe / ENDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-unk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ENDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -978,8 +876,8 @@ <h3>Enawene Nawe treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -991,11 +889,10 @@ <h3>Enawene Nawe treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Enawene Nawe / ENDT entry -->
-      
-    </div> <!-- end of Enawene Nawe treebank list -->
+    </details>
+    
+    <!-- end of Enawene Nawe treebank list -->
 
     
 
@@ -1005,35 +902,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Enawene Nawe accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Enawene Nawe accordion row -->
 
   <!-- start of French accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" /></span>
-    <span class="doublewidespan">French</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of French accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-fr">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">French</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of French accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>French treebanks</h3>
 
     <!-- start of French treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of French / ParolesDeNormands entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-fr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ParolesDeNormands</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1042,8 +933,8 @@ <h3>French treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1055,11 +946,10 @@ <h3>French treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French / ParolesDeNormands entry -->
-      
-    </div> <!-- end of French treebank list -->
+    </details>
+    
+    <!-- end of French treebank list -->
 
     
     See <a href="treebanks/fr-comparison.html">here</a> for comparative statistics of French treebanks.
@@ -1071,35 +961,29 @@ <h3> Language documentation </h3>
     See the <a href="fr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of French accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of French accordion row -->
 
   <!-- start of French Sign Language accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" /></span>
-    <span class="doublewidespan">French Sign Language</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">Sign Language</span>
-  </div>
-  <!-- end of French Sign Language accordion row -->
-
-  <!-- start of French Sign Language accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-fsl">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">French Sign Language</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">Sign Language</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>French Sign Language treebanks</h3>
 
     <!-- start of French Sign Language treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of French Sign Language / STKAutogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-fsl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">STKAutogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1108,8 +992,8 @@ <h3>French Sign Language treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1121,11 +1005,10 @@ <h3>French Sign Language treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of French Sign Language / STKAutogramm entry -->
-      
-    </div> <!-- end of French Sign Language treebank list -->
+    </details>
+    
+    <!-- end of French Sign Language treebank list -->
 
     
 
@@ -1135,35 +1018,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of French Sign Language accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of French Sign Language accordion row -->
 
   <!-- start of Frisian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/NL-FR.svg" /></span>
-    <span class="doublewidespan">Frisian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="51,258 tokens 51,258 words 51,258 nodes 2,969 sentences">51K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction news nonfiction wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Frisian accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-fy">
+      <span class="flagspan"><img class="flag" src="flags/svg/NL-FR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Frisian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="51,258 tokens 51,258 words 51,258 nodes 2,969 sentences">51K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="academic fiction news nonfiction wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Frisian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Frisian treebanks</h3>
 
     <!-- start of Frisian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Frisian / Frysk entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-fy">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Frysk</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="51,258 tokens 51,258 words 51,258 nodes 2,969 sentences">51K</span></span>
@@ -1172,8 +1049,8 @@ <h3>Frisian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="academic fiction news nonfiction wiki"><i class="fa fa-graduation-cap"></i><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD Frisian-FA-RuG treebank is a West Frisian treebank.
 
@@ -1185,11 +1062,10 @@ <h3>Frisian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Frisian / Frysk entry -->
-      
-    </div> <!-- end of Frisian treebank list -->
+    </details>
+    
+    <!-- end of Frisian treebank list -->
 
     
 
@@ -1199,35 +1075,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Frisian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Frisian accordion row -->
 
   <!-- start of Gedeo accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ET.svg" /></span>
-    <span class="doublewidespan">Gedeo</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="263 tokens 263 words 263 nodes 47 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Cushitic</span>
-  </div>
-  <!-- end of Gedeo accordion row -->
-
-  <!-- start of Gedeo accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-drs">
+      <span class="flagspan"><img class="flag" src="flags/svg/ET.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Gedeo</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="263 tokens 263 words 263 nodes 47 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Cushitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Gedeo treebanks</h3>
 
     <!-- start of Gedeo treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Gedeo / GDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-drs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="263 tokens 263 words 263 nodes 47 sentences">&lt;1K</span></span>
@@ -1236,8 +1106,8 @@ <h3>Gedeo treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1249,11 +1119,10 @@ <h3>Gedeo treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Gedeo / GDT entry -->
-      
-    </div> <!-- end of Gedeo treebank list -->
+    </details>
+    
+    <!-- end of Gedeo treebank list -->
 
     
 
@@ -1263,35 +1132,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Gedeo accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Gedeo accordion row -->
 
   <!-- start of Georgian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" /></span>
-    <span class="doublewidespan">Georgian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1,369 tokens 1,429 words 1,429 nodes 77 sentences">1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">Kartvelian</span>
-  </div>
-  <!-- end of Georgian accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-ka">
+      <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Georgian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1,369 tokens 1,429 words 1,429 nodes 77 sentences">1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">Kartvelian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Georgian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Georgian treebanks</h3>
 
     <!-- start of Georgian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Georgian / GEOWIKI entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-ka">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GEOWIKI</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="1,369 tokens 1,429 words 1,429 nodes 77 sentences">1K</span></span>
@@ -1300,8 +1163,8 @@ <h3>Georgian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         **UD\_Georgian-GEOWIKI** is a Universal Dependencies corpus for the Georgian language, derived from randomly selected texts from the Georgian Wikipedia. The corpus currently contains 385 sentences, which were automatically tokenized and morphologically tagged using a TreeTagger model trained on a separate Georgian dataset. You can find the TreeTagger resource [here](https://github.com/SophikoComp/TreeTagger-for-Georgian).
 
@@ -1317,11 +1180,10 @@ <h3>Georgian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Georgian / GEOWIKI entry -->
-      
-    </div> <!-- end of Georgian treebank list -->
+    </details>
+    
+    <!-- end of Georgian treebank list -->
 
     
     See <a href="treebanks/ka-comparison.html">here</a> for comparative statistics of Georgian treebanks.
@@ -1333,35 +1195,29 @@ <h3> Language documentation </h3>
     See the <a href="ka/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Georgian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Georgian accordion row -->
 
   <!-- start of Gilaki accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" /></span>
-    <span class="doublewidespan">Gilaki</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Gilaki accordion row -->
-
-  <!-- start of Gilaki accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-glk">
+      <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Gilaki</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Gilaki treebanks</h3>
 
     <!-- start of Gilaki treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Gilaki / GileDaar entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-glk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GileDaar</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1370,8 +1226,8 @@ <h3>Gilaki treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1383,11 +1239,10 @@ <h3>Gilaki treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Gilaki / GileDaar entry -->
-      
-    </div> <!-- end of Gilaki treebank list -->
+    </details>
+    
+    <!-- end of Gilaki treebank list -->
 
     
 
@@ -1397,35 +1252,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Gilaki accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Gilaki accordion row -->
 
   <!-- start of Greek accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GR.svg" /></span>
-    <span class="doublewidespan">Greek</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED grammar-examples"><i class="fa fa-file-o"></i><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Greek</span>
-  </div>
-  <!-- end of Greek accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-el">
+      <span class="flagspan"><img class="flag" src="flags/svg/GR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Greek</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED grammar-examples"><i class="fa fa-file-o"></i><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Greek</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Greek accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Greek treebanks</h3>
 
     <!-- start of Greek treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Greek / Cypriot entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-el">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Cypriot</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1434,8 +1283,8 @@ <h3>Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](https://universaldependencies.org/contributing/repository_files.html#the-readme-file) for README guidelines) ...
 
@@ -1447,12 +1296,11 @@ <h3>Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Greek / Cypriot entry -->
-      
-      <!-- start of Greek / Griko entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-el">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Griko</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1461,8 +1309,8 @@ <h3>Greek treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1474,11 +1322,10 @@ <h3>Greek treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Greek / Griko entry -->
-      
-    </div> <!-- end of Greek treebank list -->
+    </details>
+    
+    <!-- end of Greek treebank list -->
 
     
     See <a href="treebanks/el-comparison.html">here</a> for comparative statistics of Greek treebanks.
@@ -1490,35 +1337,29 @@ <h3> Language documentation </h3>
     See the <a href="el/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Greek accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Greek accordion row -->
 
   <!-- start of Hiligaynon accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" /></span>
-    <span class="doublewidespan">Hiligaynon</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4 tokens 4 words 4 nodes 1 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
-  </div>
-  <!-- end of Hiligaynon accordion row -->
-
-  <!-- start of Hiligaynon accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-hil">
+      <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Hiligaynon</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4 tokens 4 words 4 nodes 1 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Hiligaynon treebanks</h3>
 
     <!-- start of Hiligaynon treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Hiligaynon / HTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-hil">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4 tokens 4 words 4 nodes 1 sentences">&lt;1K</span></span>
@@ -1527,8 +1368,8 @@ <h3>Hiligaynon treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Hiligaynon-HTB is a UD treebank containing sentences manually-annotated from grammar books
 [PALI Language Texts](https://www.hawaiiopen.org/bookseries/pali-language-texts-philippines/)
@@ -1542,11 +1383,10 @@ <h3>Hiligaynon treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hiligaynon / HTB entry -->
-      
-    </div> <!-- end of Hiligaynon treebank list -->
+    </details>
+    
+    <!-- end of Hiligaynon treebank list -->
 
     
 
@@ -1556,35 +1396,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Hiligaynon accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Hiligaynon accordion row -->
 
   <!-- start of Hindi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Hindi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="4,225 tokens 4,225 words 4,225 nodes 477 sentences">4K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Hindi accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-hi">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Hindi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="4,225 tokens 4,225 words 4,225 nodes 477 sentences">4K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Hindi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Hindi treebanks</h3>
 
     <!-- start of Hindi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Hindi / Convers entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-hi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Convers</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="4,225 tokens 4,225 words 4,225 nodes 477 sentences">4K</span></span>
@@ -1593,8 +1427,8 @@ <h3>Hindi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="social"><i class="fa fa-feed"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1606,11 +1440,10 @@ <h3>Hindi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Hindi / Convers entry -->
-      
-    </div> <!-- end of Hindi treebank list -->
+    </details>
+    
+    <!-- end of Hindi treebank list -->
 
     
     See <a href="treebanks/hi-comparison.html">here</a> for comparative statistics of Hindi treebanks.
@@ -1622,35 +1455,29 @@ <h3> Language documentation </h3>
     See the <a href="hi/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Hindi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Hindi accordion row -->
 
   <!-- start of Huave accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" /></span>
-    <span class="doublewidespan">Huave</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Huavean</span>
-  </div>
-  <!-- end of Huave accordion row -->
-
-  <!-- start of Huave accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-huv">
+      <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Huave</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Huavean</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Huave treebanks</h3>
 
     <!-- start of Huave treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Huave / MesoTree entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-huv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MesoTree</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1659,8 +1486,8 @@ <h3>Huave treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1672,11 +1499,10 @@ <h3>Huave treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Huave / MesoTree entry -->
-      
-    </div> <!-- end of Huave treebank list -->
+    </details>
+    
+    <!-- end of Huave treebank list -->
 
     
 
@@ -1686,35 +1512,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Huave accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Huave accordion row -->
 
   <!-- start of Italian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IT.svg" /></span>
-    <span class="doublewidespan">Italian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Italian accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-it">
+      <span class="flagspan"><img class="flag" src="flags/svg/IT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Italian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Italian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Italian treebanks</h3>
 
     <!-- start of Italian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Italian / TrIttok entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-it">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TrIttok</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1723,8 +1543,8 @@ <h3>Italian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](https://universaldependencies.org/contributing/repository_files.html#the-readme-file) for README guidelines) ...
 
@@ -1736,11 +1556,10 @@ <h3>Italian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Italian / TrIttok entry -->
-      
-    </div> <!-- end of Italian treebank list -->
+    </details>
+    
+    <!-- end of Italian treebank list -->
 
     
     See <a href="treebanks/it-comparison.html">here</a> for comparative statistics of Italian treebanks.
@@ -1752,35 +1571,29 @@ <h3> Language documentation </h3>
     See the <a href="it/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Italian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Italian accordion row -->
 
   <!-- start of Japanese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/JP.svg" /></span>
-    <span class="doublewidespan">Japanese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Japanese</span>
-  </div>
-  <!-- end of Japanese accordion row -->
-
-  <!-- start of Japanese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-ja">
+      <span class="flagspan"><img class="flag" src="flags/svg/JP.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Japanese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Japanese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Japanese treebanks</h3>
 
     <!-- start of Japanese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Japanese / JDD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">JDD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1789,8 +1602,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1802,12 +1615,11 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / JDD entry -->
-      
-      <!-- start of Japanese / JDDLUW entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-ja">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">JDDLUW</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1816,8 +1628,8 @@ <h3>Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1829,11 +1641,10 @@ <h3>Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Japanese / JDDLUW entry -->
-      
-    </div> <!-- end of Japanese treebank list -->
+    </details>
+    
+    <!-- end of Japanese treebank list -->
 
     
     See <a href="treebanks/ja-comparison.html">here</a> for comparative statistics of Japanese treebanks.
@@ -1845,35 +1656,29 @@ <h3> Language documentation </h3>
     See the <a href="ja/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Japanese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Japanese accordion row -->
 
   <!-- start of Kabyle accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/DZ.svg" /></span>
-    <span class="doublewidespan">Kabyle</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="19,965 tokens 23,761 words 23,761 nodes 1,930 sentences">23K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Berber</span>
-  </div>
-  <!-- end of Kabyle accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-kab">
+      <span class="flagspan"><img class="flag" src="flags/svg/DZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kabyle</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="19,965 tokens 23,761 words 23,761 nodes 1,930 sentences">23K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Berber</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Kabyle accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Kabyle treebanks</h3>
 
     <!-- start of Kabyle treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kabyle / ADPT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-kab">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ADPT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="19,965 tokens 23,761 words 23,761 nodes 1,930 sentences">23K</span></span>
@@ -1882,8 +1687,8 @@ <h3>Kabyle treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD UD_Kabyle-ADPT (Association pour le Développement et la Promotion de Tamazight) is a treebank of Berber (Kabyle variant),
 annotated according to the Universal Dependencies guidelines.
@@ -1896,11 +1701,10 @@ <h3>Kabyle treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kabyle / ADPT entry -->
-      
-    </div> <!-- end of Kabyle treebank list -->
+    </details>
+    
+    <!-- end of Kabyle treebank list -->
 
     
 
@@ -1910,35 +1714,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Kabyle accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kabyle accordion row -->
 
   <!-- start of Kiga accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/UG.svg" /></span>
-    <span class="doublewidespan">Kiga</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Niger-Congo, Bantoid</span>
-  </div>
-  <!-- end of Kiga accordion row -->
-
-  <!-- start of Kiga accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-cgg">
+      <span class="flagspan"><img class="flag" src="flags/svg/UG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kiga</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Niger-Congo, Bantoid</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Kiga treebanks</h3>
 
     <!-- start of Kiga treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kiga / EKigaTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-cgg">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">EKigaTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -1947,8 +1745,8 @@ <h3>Kiga treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -1960,11 +1758,10 @@ <h3>Kiga treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kiga / EKigaTB entry -->
-      
-    </div> <!-- end of Kiga treebank list -->
+    </details>
+    
+    <!-- end of Kiga treebank list -->
 
     
 
@@ -1974,35 +1771,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Kiga accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kiga accordion row -->
 
   <!-- start of Komi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-KO.svg" /></span>
-    <span class="doublewidespan">Komi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="185 tokens 185 words 185 nodes 10 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Uralic, Permic</span>
-  </div>
-  <!-- end of Komi accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-kv">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-KO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Komi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="185 tokens 185 words 185 nodes 10 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Uralic, Permic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Komi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Komi treebanks</h3>
 
     <!-- start of Komi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Komi / OldPermic entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-kv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">OldPermic</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="185 tokens 185 words 185 nodes 10 sentences">&lt;1K</span></span>
@@ -2011,8 +1802,8 @@ <h3>Komi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is an Universal Dependencies treebank of Old Permic. The treebank is currently under progress, and will be published completely in the next Universal Dependencies release (v2.14), which is scheduled for May 15, 2024 (data freeze on May 1).
 
@@ -2024,11 +1815,10 @@ <h3>Komi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Komi / OldPermic entry -->
-      
-    </div> <!-- end of Komi treebank list -->
+    </details>
+    
+    <!-- end of Komi treebank list -->
 
     
 
@@ -2038,35 +1828,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Komi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Komi accordion row -->
 
   <!-- start of Kullvi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Kullvi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Kullvi accordion row -->
-
-  <!-- start of Kullvi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-kfx">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Kullvi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Kullvi treebanks</h3>
 
     <!-- start of Kullvi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Kullvi / KDTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-kfx">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">KDTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2075,8 +1859,8 @@ <h3>Kullvi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](https://universaldependencies.org/contributing/repository_files.html#the-readme-file) for README guidelines) ...
 
@@ -2088,11 +1872,10 @@ <h3>Kullvi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Kullvi / KDTB entry -->
-      
-    </div> <!-- end of Kullvi treebank list -->
+    </details>
+    
+    <!-- end of Kullvi treebank list -->
 
     
 
@@ -2102,35 +1885,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Kullvi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Kullvi accordion row -->
 
   <!-- start of Ladino accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IL.svg" /></span>
-    <span class="doublewidespan">Ladino</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Ladino accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-lad">
+      <span class="flagspan"><img class="flag" src="flags/svg/IL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Ladino</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Ladino accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Ladino treebanks</h3>
 
     <!-- start of Ladino treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Ladino / BOUN entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-lad">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BOUN</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2139,8 +1916,8 @@ <h3>Ladino treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2152,11 +1929,10 @@ <h3>Ladino treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Ladino / BOUN entry -->
-      
-    </div> <!-- end of Ladino treebank list -->
+    </details>
+    
+    <!-- end of Ladino treebank list -->
 
     
 
@@ -2166,35 +1942,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Ladino accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Ladino accordion row -->
 
   <!-- start of Laz accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" /></span>
-    <span class="doublewidespan">Laz</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,306 tokens 2,306 words 2,306 nodes 576 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Kartvelian</span>
-  </div>
-  <!-- end of Laz accordion row -->
-
-  <!-- start of Laz accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-lzz">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Laz</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,306 tokens 2,306 words 2,306 nodes 576 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Kartvelian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Laz treebanks</h3>
 
     <!-- start of Laz treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Laz / BOUN entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-lzz">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BOUN</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,306 tokens 2,306 words 2,306 nodes 576 sentences">2K</span></span>
@@ -2203,8 +1973,8 @@ <h3>Laz treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2216,11 +1986,10 @@ <h3>Laz treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Laz / BOUN entry -->
-      
-    </div> <!-- end of Laz treebank list -->
+    </details>
+    
+    <!-- end of Laz treebank list -->
 
     
 
@@ -2230,35 +1999,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Laz accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Laz accordion row -->
 
   <!-- start of Magahi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Magahi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="7,702 tokens 7,702 words 7,702 nodes 551 sentences">7K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Magahi accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-mag">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Magahi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="7,702 tokens 7,702 words 7,702 nodes 551 sentences">7K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Magahi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Magahi treebanks</h3>
 
     <!-- start of Magahi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Magahi / MGTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mag">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MGTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="7,702 tokens 7,702 words 7,702 nodes 551 sentences">7K</span></span>
@@ -2267,8 +2030,8 @@ <h3>Magahi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The [Magahi](https://en.wikipedia.org/wiki/Magahi_language) UD Treebank (MGTB) is a part of the [Universal Dependency treebank](http://universaldependencies.org/) project.
 
@@ -2280,12 +2043,11 @@ <h3>Magahi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Magahi / MGTB entry -->
-      
-      <!-- start of Magahi / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mag">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2294,8 +2056,8 @@ <h3>Magahi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks originally created
 for the [CoNLL 2017 shared task on Multilingual Parsing from Raw Text to
@@ -2309,11 +2071,10 @@ <h3>Magahi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Magahi / PUD entry -->
-      
-    </div> <!-- end of Magahi treebank list -->
+    </details>
+    
+    <!-- end of Magahi treebank list -->
 
     
 
@@ -2323,35 +2084,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Magahi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Magahi accordion row -->
 
   <!-- start of Malagasy accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MG.svg" /></span>
-    <span class="doublewidespan">Malagasy</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">Austronesian, Barito</span>
-  </div>
-  <!-- end of Malagasy accordion row -->
-
-  <!-- start of Malagasy accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-mg">
+      <span class="flagspan"><img class="flag" src="flags/svg/MG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Malagasy</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">Austronesian, Barito</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Malagasy treebanks</h3>
 
     <!-- start of Malagasy treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Malagasy / Hazo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mg">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Hazo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2360,8 +2115,8 @@ <h3>Malagasy treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2373,11 +2128,10 @@ <h3>Malagasy treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Malagasy / Hazo entry -->
-      
-    </div> <!-- end of Malagasy treebank list -->
+    </details>
+    
+    <!-- end of Malagasy treebank list -->
 
     
 
@@ -2387,35 +2141,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Malagasy accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Malagasy accordion row -->
 
   <!-- start of Mandyali accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Mandyali</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,859 tokens 2,859 words 2,859 nodes 316 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Mandyali accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-mjl">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Mandyali</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,859 tokens 2,859 words 2,859 nodes 316 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Mandyali accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Mandyali treebanks</h3>
 
     <!-- start of Mandyali treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Mandyali / MDTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mjl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MDTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,859 tokens 2,859 words 2,859 nodes 316 sentences">2K</span></span>
@@ -2424,8 +2172,8 @@ <h3>Mandyali treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2437,11 +2185,10 @@ <h3>Mandyali treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Mandyali / MDTB entry -->
-      
-    </div> <!-- end of Mandyali treebank list -->
+    </details>
+    
+    <!-- end of Mandyali treebank list -->
 
     
 
@@ -2451,35 +2198,29 @@ <h3> Language documentation </h3>
     See the <a href="mjl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Mandyali accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Mandyali accordion row -->
 
   <!-- start of Mansi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RU-KHM.svg" /></span>
-    <span class="doublewidespan">Mansi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Uralic, Ugric</span>
-  </div>
-  <!-- end of Mansi accordion row -->
-
-  <!-- start of Mansi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-mns">
+      <span class="flagspan"><img class="flag" src="flags/svg/RU-KHM.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Mansi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Uralic, Ugric</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Mansi treebanks</h3>
 
     <!-- start of Mansi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Mansi / CoWS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mns">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CoWS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2488,8 +2229,8 @@ <h3>Mansi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2501,11 +2242,10 @@ <h3>Mansi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Mansi / CoWS entry -->
-      
-    </div> <!-- end of Mansi treebank list -->
+    </details>
+    
+    <!-- end of Mansi treebank list -->
 
     
 
@@ -2515,35 +2255,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Mansi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Mansi accordion row -->
 
   <!-- start of Megrelian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" /></span>
-    <span class="doublewidespan">Megrelian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Kartvelian</span>
-  </div>
-  <!-- end of Megrelian accordion row -->
-
-  <!-- start of Megrelian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-xmf">
+      <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Megrelian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Kartvelian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Megrelian treebanks</h3>
 
     <!-- start of Megrelian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Megrelian / MLC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-xmf">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MLC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2552,8 +2286,8 @@ <h3>Megrelian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Megrelian UD Treebank (UD_Megrelian-MLC) is the first syntactically annotated corpus of Megrelian, based on a collection of annotated sentences selected from the Megrelian Language Corpus (MLC) available at http://xmf.iliauni.edu.ge/ .
 
@@ -2565,11 +2299,10 @@ <h3>Megrelian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Megrelian / MLC entry -->
-      
-    </div> <!-- end of Megrelian treebank list -->
+    </details>
+    
+    <!-- end of Megrelian treebank list -->
 
     
 
@@ -2579,35 +2312,29 @@ <h3> Language documentation </h3>
     See the <a href="xmf/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Megrelian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Megrelian accordion row -->
 
   <!-- start of Middle Irish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IE-FOUR.svg" /></span>
-    <span class="doublewidespan">Middle Irish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="797 tokens 802 words 802 nodes 41 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Celtic</span>
-  </div>
-  <!-- end of Middle Irish accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-mga">
+      <span class="flagspan"><img class="flag" src="flags/svg/IE-FOUR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Middle Irish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="797 tokens 802 words 802 nodes 41 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction news nonfiction"><i class="fa fa-book"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Celtic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Middle Irish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Middle Irish treebanks</h3>
 
     <!-- start of Middle Irish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Middle Irish / CritMITB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mga">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CritMITB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="797 tokens 802 words 802 nodes 41 sentences">&lt;1K</span></span>
@@ -2616,8 +2343,8 @@ <h3>Middle Irish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         Annotation of the classic Scela Mucce Meic Dathó (&#34;The tale of Mac Dathó&#39;s pig&#34;).
 
@@ -2629,12 +2356,11 @@ <h3>Middle Irish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Middle Irish / CritMITB entry -->
-      
-      <!-- start of Middle Irish / DipMITB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mga">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DipMITB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2643,8 +2369,8 @@ <h3>Middle Irish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2656,11 +2382,10 @@ <h3>Middle Irish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Middle Irish / DipMITB entry -->
-      
-    </div> <!-- end of Middle Irish treebank list -->
+    </details>
+    
+    <!-- end of Middle Irish treebank list -->
 
     
 
@@ -2670,35 +2395,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Middle Irish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Middle Irish accordion row -->
 
   <!-- start of Middle Persian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IR-KAVIANI.svg" /></span>
-    <span class="doublewidespan">Middle Persian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Middle Persian accordion row -->
-
-  <!-- start of Middle Persian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pal">
+      <span class="flagspan"><img class="flag" src="flags/svg/IR-KAVIANI.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Middle Persian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Middle Persian treebanks</h3>
 
     <!-- start of Middle Persian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Middle Persian / MPCD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pal">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MPCD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2707,8 +2426,8 @@ <h3>Middle Persian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2720,11 +2439,10 @@ <h3>Middle Persian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Middle Persian / MPCD entry -->
-      
-    </div> <!-- end of Middle Persian treebank list -->
+    </details>
+    
+    <!-- end of Middle Persian treebank list -->
 
     
 
@@ -2734,35 +2452,29 @@ <h3> Language documentation </h3>
     See the <a href="pal/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Middle Persian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Middle Persian accordion row -->
 
   <!-- start of Mongolian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MN.svg" /></span>
-    <span class="doublewidespan">Mongolian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Mongolic</span>
-  </div>
-  <!-- end of Mongolian accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-mn">
+      <span class="flagspan"><img class="flag" src="flags/svg/MN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Mongolian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Mongolic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Mongolian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Mongolian treebanks</h3>
 
     <!-- start of Mongolian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Mongolian / MTLR entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MTLR</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2771,8 +2483,8 @@ <h3>Mongolian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2784,11 +2496,10 @@ <h3>Mongolian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Mongolian / MTLR entry -->
-      
-    </div> <!-- end of Mongolian treebank list -->
+    </details>
+    
+    <!-- end of Mongolian treebank list -->
 
     
 
@@ -2798,35 +2509,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Mongolian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Mongolian accordion row -->
 
   <!-- start of Nkore accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/UG.svg" /></span>
-    <span class="doublewidespan">Nkore</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Niger-Congo, Bantoid</span>
-  </div>
-  <!-- end of Nkore accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-nyn">
+      <span class="flagspan"><img class="flag" src="flags/svg/UG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Nkore</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Niger-Congo, Bantoid</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Nkore accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Nkore treebanks</h3>
 
     <!-- start of Nkore treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Nkore / ENkoreTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-nyn">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ENkoreTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2835,8 +2540,8 @@ <h3>Nkore treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -2848,11 +2553,10 @@ <h3>Nkore treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Nkore / ENkoreTB entry -->
-      
-    </div> <!-- end of Nkore treebank list -->
+    </details>
+    
+    <!-- end of Nkore treebank list -->
 
     
 
@@ -2862,35 +2566,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Nkore accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Nkore accordion row -->
 
   <!-- start of Northern Kurdish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" /></span>
-    <span class="doublewidespan">Northern Kurdish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2,472 tokens 2,667 words 2,667 nodes 510 sentences">2K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Northern Kurdish accordion row -->
-
-  <!-- start of Northern Kurdish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-kmr">
+      <span class="flagspan"><img class="flag" src="flags/svg/IQ-KRD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Northern Kurdish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2,472 tokens 2,667 words 2,667 nodes 510 sentences">2K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Northern Kurdish treebanks</h3>
 
     <!-- start of Northern Kurdish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Northern Kurdish / Bezeyni entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-kmr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Bezeyni</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="2,472 tokens 2,667 words 2,667 nodes 510 sentences">2K</span></span>
@@ -2899,8 +2597,8 @@ <h3>Northern Kurdish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Bezeyni treebank is a small collection of annotated sentences in Bezeynî, a Kurdish language variety spoken in Turkey. The corpus contains 177 sentences with morphological and syntactic annotations following Universal Dependencies guidelines, providing basic coverage of nominal, verbal, and clause structures.
 
@@ -2912,11 +2610,10 @@ <h3>Northern Kurdish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Northern Kurdish / Bezeyni entry -->
-      
-    </div> <!-- end of Northern Kurdish treebank list -->
+    </details>
+    
+    <!-- end of Northern Kurdish treebank list -->
 
     
 
@@ -2926,35 +2623,29 @@ <h3> Language documentation </h3>
     See the <a href="kmr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Northern Kurdish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Northern Kurdish accordion row -->
 
   <!-- start of Northern Luri accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" /></span>
-    <span class="doublewidespan">Northern Luri</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Northern Luri accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-lrc">
+      <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Northern Luri</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Northern Luri accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Northern Luri treebanks</h3>
 
     <!-- start of Northern Luri treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Northern Luri / Khorramabadi entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-lrc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Khorramabadi</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -2963,8 +2654,8 @@ <h3>Northern Luri treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="spoken"><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_NorthernLuri-KHS is a treebank of the Khoranabadi variety of Northern Luri, annotated according to the Universal Dependencies framework.
 
@@ -2976,11 +2667,10 @@ <h3>Northern Luri treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Northern Luri / Khorramabadi entry -->
-      
-    </div> <!-- end of Northern Luri treebank list -->
+    </details>
+    
+    <!-- end of Northern Luri treebank list -->
 
     
 
@@ -2990,35 +2680,29 @@ <h3> Language documentation </h3>
     See the <a href="lrc/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Northern Luri accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Northern Luri accordion row -->
 
   <!-- start of Occitan accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR-OCC.svg" /></span>
-    <span class="doublewidespan">Occitan</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="BE SPECIFIED TO"><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Occitan accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-oc">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR-OCC.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Occitan</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="BE SPECIFIED TO"><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Occitan accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Occitan treebanks</h3>
 
     <!-- start of Occitan treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Occitan / DIVITAL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-oc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DIVITAL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3027,8 +2711,8 @@ <h3>Occitan treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="BE SPECIFIED TO"><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3040,11 +2724,10 @@ <h3>Occitan treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Occitan / DIVITAL entry -->
-      
-    </div> <!-- end of Occitan treebank list -->
+    </details>
+    
+    <!-- end of Occitan treebank list -->
 
     
 
@@ -3054,35 +2737,29 @@ <h3> Language documentation </h3>
     See the <a href="oc/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Occitan accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Occitan accordion row -->
 
   <!-- start of Old English accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GB-ENG.svg" /></span>
-    <span class="doublewidespan">Old English</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="26,310 tokens 26,310 words 26,310 nodes 1,551 sentences">26K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Old English accordion row -->
-
-  <!-- start of Old English accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-ang">
+      <span class="flagspan"><img class="flag" src="flags/svg/GB-ENG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old English</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="26,310 tokens 26,310 words 26,310 nodes 1,551 sentences">26K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction nonfiction"><i class="fa fa-book"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Old English treebanks</h3>
 
     <!-- start of Old English treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old English / OEDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-ang">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">OEDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="26,310 tokens 26,310 words 26,310 nodes 1,551 sentences">26K</span></span>
@@ -3091,8 +2768,8 @@ <h3>Old English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a 25,000 word UD treebank of Old English.
 The text has been retrieved from Martín Arista, Javier (ed.), et al. 2023. ParCorOEv3 [www.nerthusproject.com].
@@ -3106,12 +2783,11 @@ <h3>Old English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old English / OEDT entry -->
-      
-      <!-- start of Old English / TueCL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-ang">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TueCL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3120,8 +2796,8 @@ <h3>Old English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3133,11 +2809,10 @@ <h3>Old English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old English / TueCL entry -->
-      
-    </div> <!-- end of Old English treebank list -->
+    </details>
+    
+    <!-- end of Old English treebank list -->
 
     
 
@@ -3147,35 +2822,29 @@ <h3> Language documentation </h3>
     See the <a href="ang/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old English accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old English accordion row -->
 
   <!-- start of Old Georgian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" /></span>
-    <span class="doublewidespan">Old Georgian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED bible"><i class="fa fa-file-o"></i><i class="fa fa-cloud"></i></span></span>
-    <span class="triplewidespan">Kartvelian</span>
-  </div>
-  <!-- end of Old Georgian accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-oge">
+      <span class="flagspan"><img class="flag" src="flags/svg/GE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Georgian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED bible"><i class="fa fa-file-o"></i><i class="fa fa-cloud"></i></span></span>
+      <span class="triplewidespan">Kartvelian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Old Georgian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Old Georgian treebanks</h3>
 
     <!-- start of Old Georgian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Georgian / GNC entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-oge">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GNC</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3184,8 +2853,8 @@ <h3>Old Georgian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](https://universaldependencies.org/contributing/repository_files.html#the-readme-file) for README guidelines) ...
 
@@ -3197,12 +2866,11 @@ <h3>Old Georgian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Georgian / GNC entry -->
-      
-      <!-- start of Old Georgian / OGLauRo entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-oge">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">OGLauRo</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3211,8 +2879,8 @@ <h3>Old Georgian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="bible"><i class="fa fa-cloud"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](https://universaldependencies.org/contributing/repository_files.html#the-readme-file) for README guidelines) ...
 
@@ -3224,11 +2892,10 @@ <h3>Old Georgian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Georgian / OGLauRo entry -->
-      
-    </div> <!-- end of Old Georgian treebank list -->
+    </details>
+    
+    <!-- end of Old Georgian treebank list -->
 
     
 
@@ -3238,35 +2905,29 @@ <h3> Language documentation </h3>
     See the <a href="oge/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Georgian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Georgian accordion row -->
 
   <!-- start of Old Japanese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/JP.svg" /></span>
-    <span class="doublewidespan">Old Japanese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3,057 tokens 3,057 words 3,057 nodes 205 sentences">3K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">Japanese</span>
-  </div>
-  <!-- end of Old Japanese accordion row -->
-
-  <!-- start of Old Japanese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-ojp">
+      <span class="flagspan"><img class="flag" src="flags/svg/JP.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Japanese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3,057 tokens 3,057 words 3,057 nodes 205 sentences">3K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">Japanese</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Old Japanese treebanks</h3>
 
     <!-- start of Old Japanese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Japanese / LMJ entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-ojp">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LMJ</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="3,057 tokens 3,057 words 3,057 nodes 205 sentences">3K</span></span>
@@ -3275,8 +2936,8 @@ <h3>Old Japanese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Old_Japanese-LMJ is a collection of annotated texts in Late Middle Japanese, starting with Book 9 from he celebrated gunki monogatari (war tale) *Heike Monogatari*.
 
@@ -3288,11 +2949,10 @@ <h3>Old Japanese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Japanese / LMJ entry -->
-      
-    </div> <!-- end of Old Japanese treebank list -->
+    </details>
+    
+    <!-- end of Old Japanese treebank list -->
 
     
 
@@ -3302,35 +2962,29 @@ <h3> Language documentation </h3>
     See the <a href="ojp/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Japanese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Japanese accordion row -->
 
   <!-- start of Old Occitan accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/FR-OCC.svg" /></span>
-    <span class="doublewidespan">Old Occitan</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Old Occitan accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pro">
+      <span class="flagspan"><img class="flag" src="flags/svg/FR-OCC.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Occitan</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Old Occitan accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Old Occitan treebanks</h3>
 
     <!-- start of Old Occitan treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Occitan / OOT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pro">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">OOT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3339,8 +2993,8 @@ <h3>Old Occitan treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3352,11 +3006,10 @@ <h3>Old Occitan treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Occitan / OOT entry -->
-      
-    </div> <!-- end of Old Occitan treebank list -->
+    </details>
+    
+    <!-- end of Old Occitan treebank list -->
 
     
 
@@ -3366,35 +3019,29 @@ <h3> Language documentation </h3>
     See the <a href="pro/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Occitan accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Occitan accordion row -->
 
   <!-- start of Old Saxon accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/DE-HRR.svg" /></span>
-    <span class="doublewidespan">Old Saxon</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Old Saxon accordion row -->
-
-  <!-- start of Old Saxon accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-osx">
+      <span class="flagspan"><img class="flag" src="flags/svg/DE-HRR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Old Saxon</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Old Saxon treebanks</h3>
 
     <!-- start of Old Saxon treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Old Saxon / ConOS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-osx">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ConOS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3403,8 +3050,8 @@ <h3>Old Saxon treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3416,11 +3063,10 @@ <h3>Old Saxon treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Old Saxon / ConOS entry -->
-      
-    </div> <!-- end of Old Saxon treebank list -->
+    </details>
+    
+    <!-- end of Old Saxon treebank list -->
 
     
 
@@ -3430,35 +3076,29 @@ <h3> Language documentation </h3>
     See the <a href="osx/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Old Saxon accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Old Saxon accordion row -->
 
   <!-- start of Palenquero accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CO.svg" /></span>
-    <span class="doublewidespan">Palenquero</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Creole</span>
-  </div>
-  <!-- end of Palenquero accordion row -->
-
-  <!-- start of Palenquero accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pln">
+      <span class="flagspan"><img class="flag" src="flags/svg/CO.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Palenquero</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Creole</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Palenquero treebanks</h3>
 
     <!-- start of Palenquero treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Palenquero / COL entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pln">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">COL</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3467,8 +3107,8 @@ <h3>Palenquero treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3480,11 +3120,10 @@ <h3>Palenquero treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Palenquero / COL entry -->
-      
-    </div> <!-- end of Palenquero treebank list -->
+    </details>
+    
+    <!-- end of Palenquero treebank list -->
 
     
 
@@ -3494,35 +3133,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Palenquero accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Palenquero accordion row -->
 
   <!-- start of Pali accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Pali</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Pali accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pi">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Pali</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Pali accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Pali treebanks</h3>
 
     <!-- start of Pali treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Pali / PaliCanon entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pi">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PaliCanon</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3531,8 +3164,8 @@ <h3>Pali treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](https://universaldependencies.org/contributing/repository_files.html#the-readme-file) for README guidelines) ...
 
@@ -3544,11 +3177,10 @@ <h3>Pali treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Pali / PaliCanon entry -->
-      
-    </div> <!-- end of Pali treebank list -->
+    </details>
+    
+    <!-- end of Pali treebank list -->
 
     
 
@@ -3558,35 +3190,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Pali accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Pali accordion row -->
 
   <!-- start of Papiamento accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/AW.svg" /></span>
-    <span class="doublewidespan">Papiamento</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Creole</span>
-  </div>
-  <!-- end of Papiamento accordion row -->
-
-  <!-- start of Papiamento accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pap">
+      <span class="flagspan"><img class="flag" src="flags/svg/AW.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Papiamento</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Creole</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Papiamento treebanks</h3>
 
     <!-- start of Papiamento treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Papiamento / AW entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pap">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">AW</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3595,8 +3221,8 @@ <h3>Papiamento treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3608,12 +3234,11 @@ <h3>Papiamento treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Papiamento / AW entry -->
-      
-      <!-- start of Papiamento / CW entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pap">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">CW</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3622,8 +3247,8 @@ <h3>Papiamento treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         If you can read this sentence, then we are still working on our first release.
 
@@ -3635,11 +3260,10 @@ <h3>Papiamento treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Papiamento / CW entry -->
-      
-    </div> <!-- end of Papiamento treebank list -->
+    </details>
+    
+    <!-- end of Papiamento treebank list -->
 
     
 
@@ -3649,35 +3273,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Papiamento accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Papiamento accordion row -->
 
   <!-- start of Peripheral Mongolian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" /></span>
-    <span class="doublewidespan">Peripheral Mongolian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">Mongolic</span>
-  </div>
-  <!-- end of Peripheral Mongolian accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-mvf">
+      <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Peripheral Mongolian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">Mongolic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Peripheral Mongolian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Peripheral Mongolian treebanks</h3>
 
     <!-- start of Peripheral Mongolian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Peripheral Mongolian / Ordos entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-mvf">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Ordos</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3686,8 +3304,8 @@ <h3>Peripheral Mongolian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](https://universaldependencies.org/contributing/repository_files.html#the-readme-file) for README guidelines) ...
 
@@ -3699,11 +3317,10 @@ <h3>Peripheral Mongolian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Peripheral Mongolian / Ordos entry -->
-      
-    </div> <!-- end of Peripheral Mongolian treebank list -->
+    </details>
+    
+    <!-- end of Peripheral Mongolian treebank list -->
 
     
 
@@ -3713,35 +3330,29 @@ <h3> Language documentation </h3>
     See the <a href="mvf/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Peripheral Mongolian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Peripheral Mongolian accordion row -->
 
   <!-- start of Persian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" /></span>
-    <span class="doublewidespan">Persian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples news nonfiction wiki"><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Iranian</span>
-  </div>
-  <!-- end of Persian accordion row -->
-
-  <!-- start of Persian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-fa">
+      <span class="flagspan"><img class="flag" src="flags/svg/IR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Persian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="3 treebanks">3</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples news nonfiction wiki"><i class="fa fa-magic"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Iranian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Persian treebanks</h3>
 
     <!-- start of Persian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Persian / HPT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-fa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">HPT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3750,8 +3361,8 @@ <h3>Persian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="nonfiction"><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3763,12 +3374,11 @@ <h3>Persian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Persian / HPT entry -->
-      
-      <!-- start of Persian / IPerUDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-fa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">IPerUDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3777,8 +3387,8 @@ <h3>Persian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3790,12 +3400,11 @@ <h3>Persian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Persian / IPerUDT entry -->
-      
-      <!-- start of Persian / PUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-fa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3804,8 +3413,8 @@ <h3>Persian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news wiki"><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         This is a part of the Parallel Universal Dependencies (PUD) treebanks
 (original set of languages annotated for CoNLL 2017 shared task;
@@ -3819,11 +3428,10 @@ <h3>Persian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Persian / PUD entry -->
-      
-    </div> <!-- end of Persian treebank list -->
+    </details>
+    
+    <!-- end of Persian treebank list -->
 
     
     See <a href="treebanks/fa-comparison.html">here</a> for comparative statistics of Persian treebanks.
@@ -3835,35 +3443,29 @@ <h3> Language documentation </h3>
     See the <a href="fa/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Persian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Persian accordion row -->
 
   <!-- start of Pnar accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Pnar</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
-    <span class="triplewidespan">Austro-Asiatic, Khasian</span>
-  </div>
-  <!-- end of Pnar accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pbv">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Pnar</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
+      <span class="triplewidespan">Austro-Asiatic, Khasian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Pnar accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Pnar treebanks</h3>
 
     <!-- start of Pnar treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Pnar / PTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pbv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3872,8 +3474,8 @@ <h3>Pnar treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples spoken"><i class="fa fa-magic"></i><i class="fa fa-comment-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD Pnar-PTB is a conversion from the Ring (2017) dataset ([doi:10.21979/N9/KVFGBZ](http://dx.doi.org/10.21979/N9/KVFGBZ)) that underpins a grammatical description of the Pnar language (Ring 2015, [http://hdl.handle.net/10356/62519](http://hdl.handle.net/10356/62519)). The corpus consists of folktales and interviews transcribed, translated, and interlinearized.
 
@@ -3885,11 +3487,10 @@ <h3>Pnar treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Pnar / PTB entry -->
-      
-    </div> <!-- end of Pnar treebank list -->
+    </details>
+    
+    <!-- end of Pnar treebank list -->
 
     
 
@@ -3899,35 +3500,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Pnar accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Pnar accordion row -->
 
   <!-- start of Pontic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR-PONTOS.svg" /></span>
-    <span class="doublewidespan">Pontic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Greek</span>
-  </div>
-  <!-- end of Pontic accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pnt">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR-PONTOS.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Pontic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Greek</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Pontic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Pontic treebanks</h3>
 
     <!-- start of Pontic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Pontic / BOUN entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pnt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">BOUN</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -3936,8 +3531,8 @@ <h3>Pontic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -3949,11 +3544,10 @@ <h3>Pontic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Pontic / BOUN entry -->
-      
-    </div> <!-- end of Pontic treebank list -->
+    </details>
+    
+    <!-- end of Pontic treebank list -->
 
     
 
@@ -3963,35 +3557,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Pontic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Pontic accordion row -->
 
   <!-- start of Portuguese accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PT.svg" /></span>
-    <span class="doublewidespan">Portuguese</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="91,858 tokens 101,297 words 101,297 nodes 2,005 sentences">101K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal wiki"><i class="fa fa-legal"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Portuguese accordion row -->
-
-  <!-- start of Portuguese accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pt">
+      <span class="flagspan"><img class="flag" src="flags/svg/PT.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Portuguese</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="91,858 tokens 101,297 words 101,297 nodes 2,005 sentences">101K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="legal wiki"><i class="fa fa-legal"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Portuguese treebanks</h3>
 
     <!-- start of Portuguese treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Portuguese / DHBB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DHBB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4000,8 +3588,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="wiki"><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4013,12 +3601,11 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / DHBB entry -->
-      
-      <!-- start of Portuguese / PortJur entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PortJur</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="91,858 tokens 101,297 words 101,297 nodes 2,005 sentences">101K</span></span>
@@ -4027,8 +3614,8 @@ <h3>Portuguese treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="legal"><i class="fa fa-legal"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The legal portion of [Porttinari](https://sites.google.com/icmc.usp.br/poetisa/resources-and-tools), which includes public law texts produced by the judiciary (mainly summaries) and the legislature (laws), including widely known laws in Brazil, as Henry Borel law, Internet Civil Rights law, Maria da Penha law, Copyright law, Agrarian Reform law, Elderly Persons statute and Child and Adolescent statute.
 
@@ -4040,11 +3627,10 @@ <h3>Portuguese treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Portuguese / PortJur entry -->
-      
-    </div> <!-- end of Portuguese treebank list -->
+    </details>
+    
+    <!-- end of Portuguese treebank list -->
 
     
     See <a href="treebanks/pt-comparison.html">here</a> for comparative statistics of Portuguese treebanks.
@@ -4056,35 +3642,29 @@ <h3> Language documentation </h3>
     See the <a href="pt/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Portuguese accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Portuguese accordion row -->
 
   <!-- start of Prakrit accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Prakrit</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="811 tokens 973 words 973 nodes 84 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Prakrit accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pra">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Prakrit</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="811 tokens 973 words 973 nodes 84 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Prakrit accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Prakrit treebanks</h3>
 
     <!-- start of Prakrit treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Prakrit / DIPI entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pra">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">DIPI</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="811 tokens 973 words 973 nodes 84 sentences">&lt;1K</span></span>
@@ -4093,8 +3673,8 @@ <h3>Prakrit treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         **UD Prakrit-DIPI** (*Digitising Imperial Prakrit Inscriptions*) is a UD-annotated corpus of the Ashokan Prakrit inscriptions and edicts (parallel texts written in various dialects) representing an early stage of Middle Indo-Aryan. This corpus aims to facilitate comparative work on the Ashokan dialects with the help of new computational methods.
 
@@ -4106,11 +3686,10 @@ <h3>Prakrit treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Prakrit / DIPI entry -->
-      
-    </div> <!-- end of Prakrit treebank list -->
+    </details>
+    
+    <!-- end of Prakrit treebank list -->
 
     
 
@@ -4120,35 +3699,29 @@ <h3> Language documentation </h3>
     See the <a href="pra/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Prakrit accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Prakrit accordion row -->
 
   <!-- start of Punjabi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" /></span>
-    <span class="doublewidespan">Punjabi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6,195 tokens 6,220 words 6,220 nodes 299 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Punjabi accordion row -->
-
-  <!-- start of Punjabi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-pa">
+      <span class="flagspan"><img class="flag" src="flags/svg/IN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Punjabi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6,195 tokens 6,220 words 6,220 nodes 299 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Punjabi treebanks</h3>
 
     <!-- start of Punjabi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Punjabi / PunTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-pa">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PunTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,195 tokens 6,220 words 6,220 nodes 299 sentences">6K</span></span>
@@ -4157,8 +3730,8 @@ <h3>Punjabi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog news nonfiction"><i class="fa fa-calendar"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         **PunTB** (a very imaginative acronym for **Pun**jabi **T**ree**b**ank) is an in-progress treebank of Punjabi in the Gurmukhi script, aiming to cover a wide range of genres and formats.
 
@@ -4170,11 +3743,10 @@ <h3>Punjabi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Punjabi / PunTB entry -->
-      
-    </div> <!-- end of Punjabi treebank list -->
+    </details>
+    
+    <!-- end of Punjabi treebank list -->
 
     
     See <a href="treebanks/pa-comparison.html">here</a> for comparative statistics of Punjabi treebanks.
@@ -4186,35 +3758,29 @@ <h3> Language documentation </h3>
     See the <a href="pa/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Punjabi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Punjabi accordion row -->
 
   <!-- start of Puno Quechua accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PE.svg" /></span>
-    <span class="doublewidespan">Puno Quechua</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Quechuan</span>
-  </div>
-  <!-- end of Puno Quechua accordion row -->
-
-  <!-- start of Puno Quechua accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-qxp">
+      <span class="flagspan"><img class="flag" src="flags/svg/PE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Puno Quechua</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Quechuan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Puno Quechua treebanks</h3>
 
     <!-- start of Puno Quechua treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Puno Quechua / UIBK entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-qxp">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">UIBK</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4223,8 +3789,8 @@ <h3>Puno Quechua treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4236,11 +3802,10 @@ <h3>Puno Quechua treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Puno Quechua / UIBK entry -->
-      
-    </div> <!-- end of Puno Quechua treebank list -->
+    </details>
+    
+    <!-- end of Puno Quechua treebank list -->
 
     
 
@@ -4250,35 +3815,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Puno Quechua accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Puno Quechua accordion row -->
 
   <!-- start of Sardinian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/IT-SRD.svg" /></span>
-    <span class="doublewidespan">Sardinian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Sardinian accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-sc">
+      <span class="flagspan"><img class="flag" src="flags/svg/IT-SRD.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Sardinian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="2 treebanks">2</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Sardinian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Sardinian treebanks</h3>
 
     <!-- start of Sardinian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Sardinian / ContSar entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-sc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ContSar</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4287,8 +3846,8 @@ <h3>Sardinian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4300,12 +3859,11 @@ <h3>Sardinian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sardinian / ContSar entry -->
-      
-      <!-- start of Sardinian / EModSar entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    </details>
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-sc">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">EModSar</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4314,8 +3872,8 @@ <h3>Sardinian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4327,11 +3885,10 @@ <h3>Sardinian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sardinian / EModSar entry -->
-      
-    </div> <!-- end of Sardinian treebank list -->
+    </details>
+    
+    <!-- end of Sardinian treebank list -->
 
     
 
@@ -4341,35 +3898,29 @@ <h3> Language documentation </h3>
     See the <a href="sc/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Sardinian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Sardinian accordion row -->
 
   <!-- start of Serbian accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/RS.svg" /></span>
-    <span class="doublewidespan">Serbian</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="45,681 tokens 45,681 words 45,681 nodes 1,747 sentences">45K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
-    <span class="triplewidespan">IE, Slavic</span>
-  </div>
-  <!-- end of Serbian accordion row -->
-
-  <!-- start of Serbian accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-sr">
+      <span class="flagspan"><img class="flag" src="flags/svg/RS.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Serbian</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="45,681 tokens 45,681 words 45,681 nodes 1,747 sentences">45K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
+      <span class="triplewidespan">IE, Slavic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Serbian treebanks</h3>
 
     <!-- start of Serbian treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Serbian / ParCoLab entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-sr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ParCoLab</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="45,681 tokens 45,681 words 45,681 nodes 1,747 sentences">45K</span></span>
@@ -4378,8 +3929,8 @@ <h3>Serbian treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction"><i class="fa fa-book"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ParCoLab is a treebank of Serbian based on literary texts. It was originally developed between 2014 and 2018 (original corpus available here).
 
@@ -4391,11 +3942,10 @@ <h3>Serbian treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Serbian / ParCoLab entry -->
-      
-    </div> <!-- end of Serbian treebank list -->
+    </details>
+    
+    <!-- end of Serbian treebank list -->
 
     
 
@@ -4405,35 +3955,29 @@ <h3> Language documentation </h3>
     See the <a href="sr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Serbian accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Serbian accordion row -->
 
   <!-- start of Seri accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" /></span>
-    <span class="doublewidespan">Seri</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Hokan, Seri</span>
-  </div>
-  <!-- end of Seri accordion row -->
-
-  <!-- start of Seri accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-sei">
+      <span class="flagspan"><img class="flag" src="flags/svg/MX.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Seri</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Hokan, Seri</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Seri treebanks</h3>
 
     <!-- start of Seri treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Seri / MesoTree entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-sei">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MesoTree</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4442,8 +3986,8 @@ <h3>Seri treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4455,11 +3999,10 @@ <h3>Seri treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Seri / MesoTree entry -->
-      
-    </div> <!-- end of Seri treebank list -->
+    </details>
+    
+    <!-- end of Seri treebank list -->
 
     
 
@@ -4469,35 +4012,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Seri accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Seri accordion row -->
 
   <!-- start of Shipibo Konibo accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PE.svg" /></span>
-    <span class="doublewidespan">Shipibo Konibo</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Pano-Tacanan</span>
-  </div>
-  <!-- end of Shipibo Konibo accordion row -->
-
-  <!-- start of Shipibo Konibo accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-shp">
+      <span class="flagspan"><img class="flag" src="flags/svg/PE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Shipibo Konibo</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Pano-Tacanan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Shipibo Konibo treebanks</h3>
 
     <!-- start of Shipibo Konibo treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Shipibo Konibo / PUCP entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-shp">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">PUCP</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4506,8 +4043,8 @@ <h3>Shipibo Konibo treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4519,11 +4056,10 @@ <h3>Shipibo Konibo treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Shipibo Konibo / PUCP entry -->
-      
-    </div> <!-- end of Shipibo Konibo treebank list -->
+    </details>
+    
+    <!-- end of Shipibo Konibo treebank list -->
 
     
 
@@ -4533,35 +4069,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Shipibo Konibo accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Shipibo Konibo accordion row -->
 
   <!-- start of Sindhi accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" /></span>
-    <span class="doublewidespan">Sindhi</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="6,863 tokens 6,863 words 6,863 nodes 675 sentences">6K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">IE, Indic</span>
-  </div>
-  <!-- end of Sindhi accordion row -->
-
-  <!-- start of Sindhi accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-sd">
+      <span class="flagspan"><img class="flag" src="flags/svg/PK.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Sindhi</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="6,863 tokens 6,863 words 6,863 nodes 675 sentences">6K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">IE, Indic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Sindhi treebanks</h3>
 
     <!-- start of Sindhi treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Sindhi / MazharDootio entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-sd">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MazharDootio</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="6,863 tokens 6,863 words 6,863 nodes 675 sentences">6K</span></span>
@@ -4570,8 +4100,8 @@ <h3>Sindhi treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Sindhi Universal Dependency Treebank was automatically converted from Sindhi Dependency Treebank (SDTB) which is part of an ongoing effort of creating multi-layered treebanks for Sindhi.
 
@@ -4583,11 +4113,10 @@ <h3>Sindhi treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Sindhi / MazharDootio entry -->
-      
-    </div> <!-- end of Sindhi treebank list -->
+    </details>
+    
+    <!-- end of Sindhi treebank list -->
 
     
 
@@ -4597,35 +4126,29 @@ <h3> Language documentation </h3>
     See the <a href="sd/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Sindhi accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Sindhi accordion row -->
 
   <!-- start of Spanish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ES.svg" /></span>
-    <span class="doublewidespan">Spanish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="438 tokens 450 words 450 nodes 20 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">IE, Romance</span>
-  </div>
-  <!-- end of Spanish accordion row -->
-
-  <!-- start of Spanish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-es">
+      <span class="flagspan"><img class="flag" src="flags/svg/ES.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Spanish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="438 tokens 450 words 450 nodes 20 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">IE, Romance</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Spanish treebanks</h3>
 
     <!-- start of Spanish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Spanish / SVarT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-es">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">SVarT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="438 tokens 450 words 450 nodes 20 sentences">&lt;1K</span></span>
@@ -4634,8 +4157,8 @@ <h3>Spanish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4647,11 +4170,10 @@ <h3>Spanish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Spanish / SVarT entry -->
-      
-    </div> <!-- end of Spanish treebank list -->
+    </details>
+    
+    <!-- end of Spanish treebank list -->
 
     
     See <a href="treebanks/es-comparison.html">here</a> for comparative statistics of Spanish treebanks.
@@ -4663,35 +4185,29 @@ <h3> Language documentation </h3>
     See the <a href="es/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Spanish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Spanish accordion row -->
 
   <!-- start of Spanish English accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ES.svg" /></span>
-    <span class="doublewidespan">Spanish English</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Code switching</span>
-  </div>
-  <!-- end of Spanish English accordion row -->
-
-  <!-- start of Spanish English accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-qee">
+      <span class="flagspan"><img class="flag" src="flags/svg/ES.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Spanish English</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Code switching</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Spanish English treebanks</h3>
 
     <!-- start of Spanish English treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Spanish English / Miami entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-qee">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Miami</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4700,8 +4216,8 @@ <h3>Spanish English treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4713,11 +4229,10 @@ <h3>Spanish English treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Spanish English / Miami entry -->
-      
-    </div> <!-- end of Spanish English treebank list -->
+    </details>
+    
+    <!-- end of Spanish English treebank list -->
 
     
 
@@ -4727,35 +4242,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Spanish English accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Spanish English accordion row -->
 
   <!-- start of Swahili accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TZ.svg" /></span>
-    <span class="doublewidespan">Swahili</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Niger-Congo, Bantoid</span>
-  </div>
-  <!-- end of Swahili accordion row -->
-
-  <!-- start of Swahili accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-sw">
+      <span class="flagspan"><img class="flag" src="flags/svg/TZ.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Swahili</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Niger-Congo, Bantoid</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Swahili treebanks</h3>
 
     <!-- start of Swahili treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Swahili / OPUSGV entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-sw">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">OPUSGV</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4764,8 +4273,8 @@ <h3>Swahili treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -4777,11 +4286,10 @@ <h3>Swahili treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Swahili / OPUSGV entry -->
-      
-    </div> <!-- end of Swahili treebank list -->
+    </details>
+    
+    <!-- end of Swahili treebank list -->
 
     
 
@@ -4791,35 +4299,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Swahili accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Swahili accordion row -->
 
   <!-- start of Swedish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/SE.svg" /></span>
-    <span class="doublewidespan">Swedish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction government news wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
-    <span class="triplewidespan">IE, Germanic</span>
-  </div>
-  <!-- end of Swedish accordion row -->
-
-  <!-- start of Swedish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-sv">
+      <span class="flagspan"><img class="flag" src="flags/svg/SE.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Swedish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="blog fiction government news wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
+      <span class="triplewidespan">IE, Germanic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Swedish treebanks</h3>
 
     <!-- start of Swedish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Swedish / Eukalyptus entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-sv">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Eukalyptus</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -4828,8 +4330,8 @@ <h3>Swedish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="blog fiction government news wiki"><i class="fa fa-calendar"></i><i class="fa fa-book"></i><i class="fa fa-fort-awesome"></i><i class="fa fa-newspaper-o"></i><i class="fa fa-wikipedia-w"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Swedish-Eukalyptus treebank has been converted from Eukalyptus, a phrase-structure treebank of contemporary written Swedish. As of now, the conversion has not yet been finished, and no manual corrections have been done.
 
@@ -4841,11 +4343,10 @@ <h3>Swedish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Swedish / Eukalyptus entry -->
-      
-    </div> <!-- end of Swedish treebank list -->
+    </details>
+    
+    <!-- end of Swedish treebank list -->
 
     
     See <a href="treebanks/sv-comparison.html">here</a> for comparative statistics of Swedish treebanks.
@@ -4857,35 +4358,29 @@ <h3> Language documentation </h3>
     See the <a href="sv/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Swedish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Swedish accordion row -->
 
   <!-- start of Tagabawa accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" /></span>
-    <span class="doublewidespan">Tagabawa</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="101 tokens 105 words 105 nodes 11 sentences">&lt;1K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
-  </div>
-  <!-- end of Tagabawa accordion row -->
-
-  <!-- start of Tagabawa accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-bgs">
+      <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tagabawa</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="101 tokens 105 words 105 nodes 11 sentences">&lt;1K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tagabawa treebanks</h3>
 
     <!-- start of Tagabawa treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tagabawa / GJA entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-bgs">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">GJA</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="101 tokens 105 words 105 nodes 11 sentences">&lt;1K</span></span>
@@ -4894,8 +4389,8 @@ <h3>Tagabawa treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Tagabawa_GJA is a collection of annotated Bagobo-Tagabawa sentences taken from different sources. It is currently under development.
 
@@ -4907,11 +4402,10 @@ <h3>Tagabawa treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tagabawa / GJA entry -->
-      
-    </div> <!-- end of Tagabawa treebank list -->
+    </details>
+    
+    <!-- end of Tagabawa treebank list -->
 
     
 
@@ -4921,35 +4415,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Tagabawa accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tagabawa accordion row -->
 
   <!-- start of Tagalog accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" /></span>
-    <span class="doublewidespan">Tagalog</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="320,646 tokens 340,793 words 340,793 nodes 15,619 sentences">340K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
-    <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
-  </div>
-  <!-- end of Tagalog accordion row -->
-
-  <!-- start of Tagalog accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-tl">
+      <span class="flagspan"><img class="flag" src="flags/svg/PH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tagalog</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="320,646 tokens 340,793 words 340,793 nodes 15,619 sentences">340K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
+      <span class="triplewidespan">Austronesian, Greater Central Philippine</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tagalog treebanks</h3>
 
     <!-- start of Tagalog treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tagalog / NewsCrawl entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-tl">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">NewsCrawl</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="320,646 tokens 340,793 words 340,793 nodes 15,619 sentences">340K</span></span>
@@ -4958,8 +4446,8 @@ <h3>Tagalog treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news"><i class="fa fa-newspaper-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The Tagalog Universal Dependencies NewsCrawl dataset consists of annotated text extracted from the Leipzig Tagalog Corpus.
 Data included in the Leipzig Tagalog Corpus were crawled from Tagalog-language online news sites.
@@ -4972,11 +4460,10 @@ <h3>Tagalog treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tagalog / NewsCrawl entry -->
-      
-    </div> <!-- end of Tagalog treebank list -->
+    </details>
+    
+    <!-- end of Tagalog treebank list -->
 
     
     See <a href="treebanks/tl-comparison.html">here</a> for comparative statistics of Tagalog treebanks.
@@ -4988,35 +4475,29 @@ <h3> Language documentation </h3>
     See the <a href="tl/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Tagalog accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tagalog accordion row -->
 
   <!-- start of Tetun accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TL.svg" /></span>
-    <span class="doublewidespan">Tetun</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Austronesian, Malayo-Polynesian</span>
-  </div>
-  <!-- end of Tetun accordion row -->
-
-  <!-- start of Tetun accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-tdt">
+      <span class="flagspan"><img class="flag" src="flags/svg/TL.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tetun</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Austronesian, Malayo-Polynesian</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tetun treebanks</h3>
 
     <!-- start of Tetun treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tetun / TUDT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-tdt">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TUDT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -5025,8 +4506,8 @@ <h3>Tetun treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -5038,11 +4519,10 @@ <h3>Tetun treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tetun / TUDT entry -->
-      
-    </div> <!-- end of Tetun treebank list -->
+    </details>
+    
+    <!-- end of Tetun treebank list -->
 
     
 
@@ -5052,35 +4532,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Tetun accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tetun accordion row -->
 
   <!-- start of Thai accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TH.svg" /></span>
-    <span class="doublewidespan">Thai</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Tai-Kadai</span>
-  </div>
-  <!-- end of Thai accordion row -->
-
-  <!-- start of Thai accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-th">
+      <span class="flagspan"><img class="flag" src="flags/svg/TH.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Thai</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Tai-Kadai</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Thai treebanks</h3>
 
     <!-- start of Thai treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Thai / Autogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-th">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Autogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -5089,8 +4563,8 @@ <h3>Thai treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -5102,11 +4576,10 @@ <h3>Thai treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Thai / Autogramm entry -->
-      
-    </div> <!-- end of Thai treebank list -->
+    </details>
+    
+    <!-- end of Thai treebank list -->
 
     
     See <a href="treebanks/th-comparison.html">here</a> for comparative statistics of Thai treebanks.
@@ -5118,35 +4591,29 @@ <h3> Language documentation </h3>
     See the <a href="th/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Thai accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Thai accordion row -->
 
   <!-- start of Tigrinya accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/ER.svg" /></span>
-    <span class="doublewidespan">Tigrinya</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Tigrinya accordion row -->
-
-  <!-- start of Tigrinya accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-ti">
+      <span class="flagspan"><img class="flag" src="flags/svg/ER.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tigrinya</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tigrinya treebanks</h3>
 
     <!-- start of Tigrinya treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tigrinya / TiTB entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-ti">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TiTB</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -5155,8 +4622,8 @@ <h3>Tigrinya treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="TO-BE-SPECIFIED"><i class="fa fa-file-o"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/contributing/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -5168,11 +4635,10 @@ <h3>Tigrinya treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tigrinya / TiTB entry -->
-      
-    </div> <!-- end of Tigrinya treebank list -->
+    </details>
+    
+    <!-- end of Tigrinya treebank list -->
 
     
 
@@ -5182,35 +4648,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Tigrinya accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tigrinya accordion row -->
 
   <!-- start of Tunisian Arabic accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TN.svg" /></span>
-    <span class="doublewidespan">Tunisian Arabic</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
-    <span class="triplewidespan">Afro-Asiatic, Semitic</span>
-  </div>
-  <!-- end of Tunisian Arabic accordion row -->
-
-  <!-- start of Tunisian Arabic accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-aeb">
+      <span class="flagspan"><img class="flag" src="flags/svg/TN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tunisian Arabic</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
+      <span class="triplewidespan">Afro-Asiatic, Semitic</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tunisian Arabic treebanks</h3>
 
     <!-- start of Tunisian Arabic treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tunisian Arabic / NAxLAT entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-aeb">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">NAxLAT</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -5219,8 +4679,8 @@ <h3>Tunisian Arabic treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -5232,11 +4692,10 @@ <h3>Tunisian Arabic treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tunisian Arabic / NAxLAT entry -->
-      
-    </div> <!-- end of Tunisian Arabic treebank list -->
+    </details>
+    
+    <!-- end of Tunisian Arabic treebank list -->
 
     
 
@@ -5246,35 +4705,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Tunisian Arabic accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tunisian Arabic accordion row -->
 
   <!-- start of Turkish accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" /></span>
-    <span class="doublewidespan">Turkish</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="142,553 tokens 142,553 words 142,553 nodes 11,970 sentences">142K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Turkic, Southwestern</span>
-  </div>
-  <!-- end of Turkish accordion row -->
-
-  <!-- start of Turkish accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-tr">
+      <span class="flagspan"><img class="flag" src="flags/svg/TR.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Turkish</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="142,553 tokens 142,553 words 142,553 nodes 11,970 sentences">142K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Turkic, Southwestern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Turkish treebanks</h3>
 
     <!-- start of Turkish treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Turkish / ULU entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-tr">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">ULU</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="142,553 tokens 142,553 words 142,553 nodes 11,970 sentences">142K</span></span>
@@ -5283,8 +4736,8 @@ <h3>Turkish treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The UD_Turkish-ULU Treebank, is an automatic conversion of the ULU Treebank
 
@@ -5296,11 +4749,10 @@ <h3>Turkish treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkish / ULU entry -->
-      
-    </div> <!-- end of Turkish treebank list -->
+    </details>
+    
+    <!-- end of Turkish treebank list -->
 
     
     See <a href="treebanks/tr-comparison.html">here</a> for comparative statistics of Turkish treebanks.
@@ -5312,35 +4764,29 @@ <h3> Language documentation </h3>
     See the <a href="tr/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Turkish accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Turkish accordion row -->
 
   <!-- start of Turkmen accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/TM.svg" /></span>
-    <span class="doublewidespan">Turkmen</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="47,498 tokens 47,498 words 47,498 nodes 7,189 sentences">47K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
-    <span class="triplewidespan">Turkic, Southwestern</span>
-  </div>
-  <!-- end of Turkmen accordion row -->
-
-  <!-- start of Turkmen accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-tk">
+      <span class="flagspan"><img class="flag" src="flags/svg/TM.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Turkmen</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="47,498 tokens 47,498 words 47,498 nodes 7,189 sentences">47K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
+      <span class="triplewidespan">Turkic, Southwestern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Turkmen treebanks</h3>
 
     <!-- start of Turkmen treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Turkmen / TUD entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-tk">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">TUD</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="47,498 tokens 47,498 words 47,498 nodes 7,189 sentences">47K</span></span>
@@ -5349,8 +4795,8 @@ <h3>Turkmen treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="news nonfiction web"><i class="fa fa-newspaper-o"></i><i class="fa fa-info-circle"></i><i class="fa fa-globe"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         UD_Turkmen-TUD is a silver-standard Universal Dependencies treebank for Turkmen, created by translating Turkish UD treebank data into Turkmen and applying silver annotation through cross-lingual transfer.
 
@@ -5362,11 +4808,10 @@ <h3>Turkmen treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Turkmen / TUD entry -->
-      
-    </div> <!-- end of Turkmen treebank list -->
+    </details>
+    
+    <!-- end of Turkmen treebank list -->
 
     
 
@@ -5376,35 +4821,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Turkmen accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Turkmen accordion row -->
 
   <!-- start of Tuwari accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/PG.svg" /></span>
-    <span class="doublewidespan">Tuwari</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Sepik</span>
-  </div>
-  <!-- end of Tuwari accordion row -->
-
-  <!-- start of Tuwari accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-tww">
+      <span class="flagspan"><img class="flag" src="flags/svg/PG.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Tuwari</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Sepik</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-    <!-- empty space so tooltip fits -->
     <h3>Tuwari treebanks</h3>
 
     <!-- start of Tuwari treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Tuwari / Autogramm entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-tww">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">Autogramm</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -5413,8 +4852,8 @@ <h3>Tuwari treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -5426,11 +4865,10 @@ <h3>Tuwari treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Tuwari / Autogramm entry -->
-      
-    </div> <!-- end of Tuwari treebank list -->
+    </details>
+    
+    <!-- end of Tuwari treebank list -->
 
     
 
@@ -5440,35 +4878,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Tuwari accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Tuwari accordion row -->
 
   <!-- start of Uspanteko accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/GT-QC.svg" /></span>
-    <span class="doublewidespan">Uspanteko</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="13,161 tokens 13,161 words 13,161 nodes 1,787 sentences">13K</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples"><i class="fa fa-book"></i><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Mayan</span>
-  </div>
-  <!-- end of Uspanteko accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-usp">
+      <span class="flagspan"><img class="flag" src="flags/svg/GT-QC.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Uspanteko</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="13,161 tokens 13,161 words 13,161 nodes 1,787 sentences">13K</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples"><i class="fa fa-book"></i><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Mayan</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Uspanteko accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Uspanteko treebanks</h3>
 
     <!-- start of Uspanteko treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Uspanteko / MesoTree entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-usp">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">MesoTree</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="13,161 tokens 13,161 words 13,161 nodes 1,787 sentences">13K</span></span>
@@ -5477,8 +4909,8 @@ <h3>Uspanteko treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="fiction grammar-examples"><i class="fa fa-book"></i><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         The MesoTree Uspanteko UD treebank consists of a token-balanced set of trees drawn dictionary example sentences and spoken narratives.
 
@@ -5490,11 +4922,10 @@ <h3>Uspanteko treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Uspanteko / MesoTree entry -->
-      
-    </div> <!-- end of Uspanteko treebank list -->
+    </details>
+    
+    <!-- end of Uspanteko treebank list -->
 
     
 
@@ -5504,35 +4935,29 @@ <h3> Language documentation </h3>
     The language hub documentation has not yet been created.
     
 
-  </div>
-  <!-- end of Uspanteko accordion body -->
-
-  <!-- Except for class="jquery-ui-subaccordion-closed", all attributes of the accordion-related div elements can be generated during initialization of the page. However, the initialization takes up to 10 seconds and we want something reasonably nice to be visible as soon as possible. -->
+    </div>
+  </details>
+  <!-- end of Uspanteko accordion row -->
 
   <!-- start of Uyghur accordion row -->
-  <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
-    <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" /></span>
-    <span class="doublewidespan">Uyghur</span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
-    <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
-    <!-- English has so many genres that they no longer fit in doublewidespan. -->
-    <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
-    <span class="triplewidespan">Turkic, Southeastern</span>
-  </div>
-  <!-- end of Uyghur accordion row -->
+  <details class="ud-accordion" name="ud-language-sapling">
+    <summary id="language-sapling-ug">
+      <span class="flagspan"><img class="flag" src="flags/svg/CN.svg" alt="" loading="lazy" decoding="async" /></span>
+      <span class="doublewidespan">Uyghur</span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="1 treebank">1</span></span>
+      <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
+      <!-- English has so many genres that they no longer fit in doublewidespan. -->
+      <span class="triplewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
+      <span class="triplewidespan">Turkic, Southeastern</span>
+    </summary>
+    <div class="ud-accordion-body">
 
-  <!-- start of Uyghur accordion body -->
-  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="" role="tabpanel">
-  <!--initial style="height:558.8px; display: none" would make the page a bit better before setup is done but the height of the subaccordions would not be measured correctly-->
-
-    <!-- empty space so tooltip fits -->
     <h3>Uyghur treebanks</h3>
 
     <!-- start of Uyghur treebank list -->
-    <div class="jquery-ui-subaccordion-closed ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
-      
-      <!-- start of Uyghur / LDS entry -->
-      <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
+    
+    <details class="ud-accordion ud-subaccordion" name="ud-treebank-sapling-ug">
+      <summary>
         <span class="flagspan"></span>
         <span class="doublewidespan">LDS</span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="0 tokens 0 words 0 nodes 0 sentences">-</span></span>
@@ -5541,8 +4966,8 @@ <h3>Uyghur treebanks</h3>
         <span class="doublewidespan"><span class="hint--top hint--info" data-hint="grammar-examples"><i class="fa fa-magic"></i></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="CC BY-SA 4.0"><img class="license" src="logos/by-sa.svg" /></span></span>
         <span class="widespan"><span class="hint--top hint--info" data-hint="Size/quality/diversity score=0.000000"><img src="/img/stars00.png" style="max-height:1em; vertical-align:middle" /></span></span>
-      </div>
-      <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="height: 149.8px;">
+      </summary>
+      <div class="ud-accordion-body">
 
         ... 1-2 sentences (see [release checklist](http://universaldependencies.org/release_checklist.html#the-readme-file) for README guidelines) ...
 
@@ -5554,11 +4979,10 @@ <h3>Uyghur treebanks</h3>
           <li><a href="#download">Download</a></li>
         </ul>
 
-        <p>&nbsp;</p>
       </div>
-      <!-- end of Uyghur / LDS entry -->
-      
-    </div> <!-- end of Uyghur treebank list -->
+    </details>
+    
+    <!-- end of Uyghur treebank list -->
 
     
 
@@ -5568,6 +4992,7 @@ <h3> Language documentation </h3>
     See the <a href="ug/index.html">language documentation page</a>.
     
 
-  </div>
-  <!-- end of Uyghur accordion body -->
+    </div>
+  </details>
+  <!-- end of Uyghur accordion row -->
 
diff --git a/_layouts/home.html b/_layouts/home.html
index bf92a0efaf..a356ff048a 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -11,7 +11,6 @@
     <link rel="stylesheet" type="text/css" href="{{ relative }}css/style.css"/>
     <link rel="stylesheet" type="text/css" href="{{ relative }}css/style-vis.css"/>
     <link rel="stylesheet" type="text/css" href="{{ relative }}css/hint.css"/>
-    <script type="text/javascript" src="{{ relative }}lib/ext/head.load.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.2/anchor.min.js"></script>
     <script>document.addEventListener("DOMContentLoaded", function(event) {anchors.add();});</script>
   </head>
@@ -41,32 +40,9 @@
       {% endif %}
 
       <div id="content">
-        <noscript>
-          <div id="noscript">
-            It appears that you have Javascript disabled.
-            Please consider enabling Javascript for this page to see the visualizations.
-          </div>
-        </noscript>
         {{ content }}
       </div>
 
-      <script type="text/javascript">
-          console.time('loading libraries');
-          var root = '{{ relative }}'; // filled in by jekyll
-          head.js(
-              // External libraries
-              // DZ: Copied from embedding.html. I don't know which one is needed for what, so I'm currently keeping them all.
-              root + 'lib/ext/jquery.min.js',
-              root + 'lib/ext/jquery.svg.min.js',
-              root + 'lib/ext/jquery.svgdom.min.js',
-              root + 'lib/ext/jquery-ui.min.js',
-              root + 'lib/ext/waypoints.min.js',
-              root + 'lib/ext/jquery.address.min.js'
-          );
-      </script>
-
-<!-- support for accordions -->
-{% include accordion.html %}
 
       <div id="footer">
         <p class="footer-text">&copy; 2014–2024
diff --git a/css/style.css b/css/style.css
index d1cf6b9d0a..79292a7c89 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,25 +7,75 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
 /*@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,600italic,700italic&subset=latin&effect=smoothing);*/
 
-/* Accordion panels start closed; _includes/accordion.html toggles them
-   via inline display. */
-.jquery-ui-accordion .ui-accordion-content {
-  display: none;
-}
-.jquery-ui-accordion .ui-accordion-header {
+/* Language/treebank accordions on the home page: native <details> rows
+   (markup generated by docs-automation templates/language.md).
+   Metrics and colors replicate the jquery-ui-redmond accordion widget
+   these rows replaced: ui-widget font (Lucida 0.9em/1.3), padding-less
+   headers 1px apart, and the theme's 16x16 sprite triangles. */
+details.ud-accordion {
+  margin-top: 1px;
+  font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
+  font-size: 0.9em;
+  line-height: 1.3;
+}
+details.ud-accordion details.ud-accordion {
+  font-size: 1em; /* don't compound the 0.9em on nested treebank rows */
+}
+details.ud-accordion > summary {
+  display: block; /* suppress the default marker; sprite triangle below */
+  list-style: none;
   cursor: pointer;
+  position: relative;
+  padding: 0;
+  border: 1px solid #c5dbec;
+  background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
+  font-weight: bold;
+  color: #1c425f;
+  border-radius: 5px;
 }
-/* Header hover, matching the redmond theme's ui-state-hover colors. */
-.jquery-ui-accordion .ui-accordion-header.ui-state-default:hover {
-  border: 1px solid #79b7e7;
+details.ud-accordion > summary::-webkit-details-marker {
+  display: none;
+}
+details.ud-accordion > summary::before {
+  content: '';
+  position: absolute;
+  left: .5em;
+  top: 50%;
+  margin-top: -8px;
+  width: 16px;
+  height: 16px;
+  background: url(images/ui-icons_6da8d5_256x240.png) no-repeat -32px -16px; /* triangle-1-e */
+}
+details.ud-accordion[open] > summary {
+  border-radius: 5px 5px 0 0;
+  border-color: #79b7e7;
+  background: #f5f8f9 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x;
+  color: #e17009;
+}
+details.ud-accordion[open] > summary::before {
+  background-image: url(images/ui-icons_f9bd01_256x240.png);
+  background-position: -64px -16px; /* triangle-1-s */
+}
+details.ud-accordion > summary:hover {
+  border-color: #79b7e7;
   background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
   color: #1d5987;
 }
-/* Keyboard focus indicator (the theme's ui-helper-reset removes outlines). */
-.jquery-ui-accordion .ui-accordion-header:focus-visible {
+details.ud-accordion > summary:hover::before {
+  background-image: url(images/ui-icons_217bc0_256x240.png);
+}
+details.ud-accordion > summary:focus-visible {
   outline: 2px solid #1d5987;
   outline-offset: -2px;
 }
+details.ud-accordion > .ud-accordion-body {
+  border: 1px solid #a6c9e2;
+  border-top: 0;
+  background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
+  color: #222222;
+  padding: 1em 2.2em;
+  margin-bottom: 2px;
+}
 
 /* override sentence number text style from brat style-vis.css */
 .sentnum text {
diff --git a/index.md b/index.md
index 242f3841ec..044c05d23f 100644
--- a/index.md
+++ b/index.md
@@ -67,9 +67,9 @@ If you are new to UD, you should start by reading the first part of the Short In
 <small>Information about language families (and genera for families with multiple branches) is mostly taken from
 [WALS Online](http://wals.info) (IE = Indo-European).</small>
 
-<div id="accordion" class="jquery-ui-accordion">
+{::nomarkdown}
 {% include at_glance.html %}
-</div>
+{:/nomarkdown}
 
 <small>Disclaimer: Our use of flags to symbolise languages is only intended as a visual enhancement of the website and should not be interpreted as a political statement in any way.</small>
 
@@ -78,9 +78,9 @@ If you are new to UD, you should start by reading the first part of the Short In
 People have expressed interest in providing annotated data for the following languages but no
 valid data has been provided so far.
 
-<div id="accordion" class="jquery-ui-accordion">
+{::nomarkdown}
 {% include at_glance_sapling.html %}
-</div>
+{:/nomarkdown}
 
 <small>Disclaimer: Our use of flags to symbolise languages is only intended as a visual enhancement of the website and should not be interpreted as a political statement in any way.</small>
 
@@ -89,9 +89,9 @@ valid data has been provided so far.
 The following treebanks have been part of one or more UD releases in the past but they are no
 longer maintained and they have been excluded from the most recent release.
 
-<div id="accordion" class="jquery-ui-accordion">
+{::nomarkdown}
 {% include at_glance_retired.html %}
-</div>
+{:/nomarkdown}
 
 <small>Disclaimer: Our use of flags to symbolise languages is only intended as a visual enhancement of the website and should not be interpreted as a political statement in any way.</small>