diff --git a/TODO.md b/TODO.md
index d030830d..1ea2031a 100644
--- a/TODO.md
+++ b/TODO.md
@@ -3,8 +3,6 @@
 * ensure appropriate caching headers are used
 * remove jQuery
 * consider removing `events` and `worldmap` modules
-* split the template/content files out from `conservancy/static` into their own
-  `content` directory (avoid mixing static and non-static content)
 * ask Denver about why so many license files
 * serve a 400 in Apache for a hostname we don't explicitly support
 * use `<detail>` elements for supporter page hidden sections, rather than
@@ -15,6 +13,8 @@
 
 # Done
 
+* split the template/content files out from `conservancy/static` into their own
+  `content` directory (avoid mixing static and non-static content)
 * remove `ForceCanonicalHostnameMiddleware` by ensuring canonical redirect and
   HTTPS redirect is done by Apache
 * standardise settings to replace `settings.py` and `djangocommonsettings.py`
diff --git a/conservancy/static/js/conservancy.js b/conservancy/static/js/conservancy.js
index fb6fea34..dca9848b 100644
--- a/conservancy/static/js/conservancy.js
+++ b/conservancy/static/js/conservancy.js
@@ -5,7 +5,11 @@
 **  Find a copy of GPL at https://sfconservancy.org/GPLv3
 */
 
-$(document).ready(function() {
+function qs (selector) {
+  return document.querySelector(selector);
+}
+
+function init () {
     /* When the browser doesn't support any video source, replace it
        with the HTML inside the <video> element. */
     var showVideoInnerHTML = function(event) {
@@ -19,45 +23,28 @@ $(document).ready(function() {
         $('source', video).last().on('error', showVideoInnerHTML);
     });
 
-    /* Set up donation form elements used across the whole site. */
-    $('.toggle-content').hide();
-    $('.toggle-control')
-     .addClass('clickable')
-     .bind('click', function() {
-        var $control = $(this);
-        var $parent = $control.parents('.toggle-unit');
-
-        $parent.toggleClass('expanded');
-        $parent.find('.toggle-content').slideToggle();
-
-        // if control has HTML5 data attributes, use to update text
-        if ($parent.hasClass('expanded')) {
-            $control.html($control.attr('data-expanded-text'));
-        } else {
-            $control.html($control.attr('data-text'));
-        }
-    });
-
     $('input[name=on0]:radio').on('change', function(event, duration) {
-        var $input = $(this);
-        var wantShirt = $input.val() == "wantGiftYes";
-        var $form = $input.parents('form').last();
-        var $tShirtSelector = $('.t-shirt-size-selector', $form);
-        $('input', $tShirtSelector).prop('disabled', wantShirt);
-        $('input[name=no_shipping]', $form).val(wantShirt ? '2' : '0');
+        var input = $(this);
+        var wantShirt = input.val() == "wantGiftYes";
+        var form = input.parents('form').last();
+        var tShirtSelector = $('.t-shirt-size-selector', form);
+        $('input', tShirtSelector).prop('disabled', wantShirt);
+        $('input[name=no_shipping]', form).val(wantShirt ? '2' : '0');
         if (wantShirt) {
-            $tShirtSelector.slideDown(duration);
+            tShirtSelector.slideDown(duration);
         } else {
-            $tShirtSelector.slideUp(duration);
+            tShirtSelector.slideUp(duration);
         }
     }).filter(':checked').trigger('change', 0);
 
     // Open mobile/search menu.
-    $('#menu-icon').on('click', function(event) {
-        $('#navbar').toggleClass('mobile');
+    qs('#menu-icon').addEventListener('click', function(event) {
+      qs('#navbar').classList.toggle('mobile');
     });
-    $('#search-icon').on('click', function(event) {
-        $('#navbar').toggleClass('mobile');
-        $('#search-query').focus();
+    qs('#search-icon').addEventListener('click', function(event) {
+      qs('#navbar').classList.toggle('mobile');
+      qs('#search-query').focus();
     });
-});
+}
+
+init();
diff --git a/conservancy/templates/supporter/index.html b/conservancy/templates/supporter/index.html
index 4ad1eb8d..a35667b6 100644
--- a/conservancy/templates/supporter/index.html
+++ b/conservancy/templates/supporter/index.html
@@ -309,40 +309,33 @@ reach for reproducibility. </p>
   <details>
     <summary>Support Now!</summary>
 
-    <h3 class="donate-box-highlight">Become a Sustainer Now:</h3>
+    <p class="mv2">Become a Sustainer Now:</p>
 
-    <p>Support us now!</p>
+    <ul>
+      <li class="mb2"><a href="#annual"><span class="donate-box-highlight">Annual sustainer</span> via PayPal, ACH, or credit card</a></li>
+      <li class="mb2"><a href="#monthly"><span class="donate-box-highlight">Monthly sustainer</span> via PayPal, ACH, or credit card</a></li>
+      <li class="mb2"><a href="#renewal"><span class="donate-box-highlight">Renewing Annual sustainer</span> via PayPal, ACH, or credit card</a></li>
+    </ul>
 
-    <h4><a href="#annual"><span class="donate-box-highlight">Annual sustainer</span> via PayPal, ACH, or credit card.</a></h4>
-    <h4><a href="#monthly"><span class="donate-box-highlight">Monthly sustainer</span> via PayPal, ACH, or credit card.</a></h4>
-    <h4><a href="#renewal"><span class="donate-box-highlight">Renewing Annual sustainer</span> via PayPal, ACH, or credit card.</a></h4>
+    <p class="mv2">Other annual sustainers methods:</p>
 
-    <span class="donate-box-highlight">Other annual sustainers methods:</span>
-    <div class="toggle-unit">
-      <h4 class="toggle-control" data-text="Wire Transfer"
-          data-expanded-text="Wire Transfer:">Wire Transfer</h4>
-      <div class="toggle-content">
+    <details class="mv2">
+      <summary class="f6 pt0 pb1">Wire Transfer</summary>
         Contact <a href="mailto:donate@sfconservancy.org">Conservancy
-        by email</a><br/> for wire transfer instructions.<br/>
-        Include  currency &amp; country.<br/>
-      </div><!-- /.toggle-content -->
-    </div><!-- /.toggle.unit -->
+        by email</a> for wire transfer instructions. Include currency &amp; country.<br/>
+    </details>
 
-    <div class="toggle-unit">
-      <h4 class="toggle-control" data-text="Paper Check"
-          data-expanded-text="Paper Check:">Paper Check</h4>
-      <div class="toggle-content">
-        Send paper check for $120 to:<br/>
-        Software Freedom Conservancy, Inc.<br/>
+    <details class="mv2">
+      <summary class="f6 pt0 pb1">Paper Check</summary>
+      <p>Send paper check for $120 to:</p>
+      <p>Software Freedom Conservancy, Inc.<br/>
         137 MONTAGUE ST  STE 380<br/>
-        BROOKLYN, NY 11201-3548 &nbsp; USA<br/>
-        Please write <q>SUSTAINER</q>, t-shirt size, if you are renewing, and if
-        you want public acknowledgment in memo line.
-      </div><!-- /.toggle-content -->
-    </div><!-- /.toggle.unit -->
+        BROOKLYN, NY 11201-3548 &nbsp; USA</p>
+      <p>Please write <q>SUSTAINER</q>, T-shirt size, if you are renewing, and if
+        you want public acknowledgment in memo line.</p>
+    </details>
 
-    <p><a href="/donate">Even More Ways to Donate</a></p>
-    <!-- Flattr end -->
+    <p class="mv2"><a href="/donate">Even More Ways to Donate</a></p>
   </details>
 </div>
 {% endblock %}