diff --git a/src/_h5ai/public/js/lib/ext/custom.js b/src/_h5ai/public/js/lib/ext/custom.js
index 7250b64a..6c979817 100644
--- a/src/_h5ai/public/js/lib/ext/custom.js
+++ b/src/_h5ai/public/js/lib/ext/custom.js
@@ -1,4 +1,5 @@
-const {jq, marked} = require('../globals');
+const {each, dom} = require('../util');
+const {marked} = require('../globals');
 const server = require('../server');
 const event = require('../core/event');
 const allsettings = require('../core/settings');
@@ -7,47 +8,25 @@ const allsettings = require('../core/settings');
 const settings = Object.assign({
     enabled: false
 }, allsettings.custom);
-let $header;
-let $footer;
-const duration = 200;
 
+const update = (data, key) => {
+    const $el = dom(`#content-${key}`);
+
+    if (data && data[key].content) {
+        let content = data[key].content;
+        if (data[key].type === 'md') {
+            content = marked(content);
+        }
+        $el.html(content).show();
+    } else {
+        $el.hide();
+    }
+};
 
 const onLocationChanged = item => {
     server.request({action: 'get', custom: item.absHref}).then(response => {
-        const custom = response && response.custom;
-        let hasHeader;
-        let hasFooter;
-
-        if (custom) {
-            const header = custom.header;
-            const footer = custom.footer;
-            let content;
-
-            if (header.content) {
-                content = header.content;
-                if (header.type === 'md') {
-                    content = marked(content);
-                }
-                $header.html(content).stop().slideDown(duration);
-                hasHeader = true;
-            }
-
-            if (footer.content) {
-                content = footer.content;
-                if (footer.type === 'md') {
-                    content = marked(content);
-                }
-                $footer.html(content).stop().slideDown(duration);
-                hasFooter = true;
-            }
-        }
-
-        if (!hasHeader) {
-            $header.stop().slideUp(duration);
-        }
-        if (!hasFooter) {
-            $footer.stop().slideUp(duration);
-        }
+        const data = response && response.custom;
+        each(['header', 'footer'], key => update(data, key));
     });
 };
 
@@ -56,8 +35,8 @@ const init = () => {
         return;
     }
 
-    $header = jq('<div id="content-header"/>').hide().prependTo('#content');
-    $footer = jq('<div id="content-footer"/>').hide().appendTo('#content');
+    dom('<div id="content-header"></div>').hide().preTo('#content');
+    dom('<div id="content-footer"></div>').hide().appTo('#content');
 
     event.sub('location.changed', onLocationChanged);
 };