diff --git a/public/js/leader-page.js b/public/js/leader-page.js
new file mode 100644
index 00000000..2db297ee
--- /dev/null
+++ b/public/js/leader-page.js
@@ -0,0 +1,48 @@
+/**
+ * Leader Page - Accordion Functionality
+ * Handles expandable/collapsible sections for leadership content
+ * Implements WAI-ARIA Authoring Practices for accordions
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+ // Get all accordion buttons
+ const accordionButtons = document.querySelectorAll('[data-accordion]');
+
+ accordionButtons.forEach(button => {
+ // Click handler
+ button.addEventListener('click', function() {
+ const accordionId = this.dataset.accordion;
+ toggleAccordion(accordionId, this);
+ });
+
+ // Keyboard handler (Enter and Space)
+ button.addEventListener('keydown', function(e) {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ const accordionId = this.dataset.accordion;
+ toggleAccordion(accordionId, this);
+ }
+ });
+ });
+
+ /**
+ * Toggle accordion section open/closed
+ * @param {string} id - Accordion section ID
+ * @param {HTMLElement} button - The button element that triggered toggle
+ */
+ function toggleAccordion(id, button) {
+ const content = document.getElementById(id + '-content');
+ const icon = document.getElementById(id + '-icon');
+
+ if (content && icon) {
+ const isExpanded = content.classList.contains('active');
+
+ // Toggle CSS classes for visual state
+ content.classList.toggle('active');
+ icon.classList.toggle('active');
+
+ // Update ARIA state
+ button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+ }
+ }
+});
diff --git a/public/leader.html b/public/leader.html
index 4efa11f4..acb0ce00 100644
--- a/public/leader.html
+++ b/public/leader.html
@@ -17,9 +17,9 @@
-
-
-
+
+
+