diff --git a/assets/js/citizen-engagement.js b/assets/js/citizen-engagement.js
new file mode 100644
index 0000000000..645ad98f70
--- /dev/null
+++ b/assets/js/citizen-engagement.js
@@ -0,0 +1,14 @@
+document.addEventListener('click', (e) => {
+    // <- Dropdown functionality
+    const isDropdownArrow = e.target.closest("[data-dropdown-arrow");
+    let currentDropown;
+    if (isDropdownArrow) {
+        currentDropdown = e.target.closest("[data-dropdown]");
+        currentDropdown.classList.toggle("activated");
+    }
+    document.querySelectorAll("[data-dropdown].activated").forEach(dropdown => {
+        if (dropdown === currentDropdown) return;
+        dropdown.classList.remove("activated");
+    })
+    // Dropdown functionality ->
+})
diff --git a/pages/citizen-engagement.html b/pages/citizen-engagement.html
index 3026bbfe07..94eaa82b48 100644
--- a/pages/citizen-engagement.html
+++ b/pages/citizen-engagement.html
@@ -61,23 +61,4 @@ <h3>Organizations We Work With</h3>
 </section>
 
 <!-- Include javaScript -->
-<script>
-
-    document.addEventListener('click', (e) => {
-        // <- Dropdown functionality
-        const isDropdownArrow = e.target.closest("[data-dropdown-arrow");
-        let currentDropown;
-
-        if (isDropdownArrow) {
-            currentDropdown = e.target.closest("[data-dropdown]");
-            currentDropdown.classList.toggle("activated");
-        }
-
-        document.querySelectorAll("[data-dropdown].activated").forEach(dropdown => {
-            if (dropdown === currentDropdown) return;
-            dropdown.classList.remove("activated");
-        })
-        // Dropdown functionality ->
-    })
-
-</script>
\ No newline at end of file
+<script src="{{ '/assets/js/citizen-engagement.js' | absolute_url }}"></script>