Move js to page bottom

Author: lwasser

_includes/footer.html

@@ -0,0 +1,24 @@
+<div class="page__footer-follow">
+    <ul class="social-icons">
+      {% if site.data.ui-text[site.locale].follow_label %}
+        <li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
+      {% endif %}
+  
+      {% if site.footer.links %}
+        {% for link in site.footer.links %}
+          {% if link.label and link.url %}
+            <li><a href="{{ link.url }}" rel="nofollow noopener noreferrer"><i class="{{ link.icon | default: 'fas fa-link' }}" aria-hidden="true"></i> {{ link.label }}</a></li>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+  
+      {% unless site.atom_feed.hide %}
+        <li><a href="{% if site.atom_feed.path %}{{ site.atom_feed.path }}{% else %}{{ '/feed.xml' | relative_url }}{% endif %}"><i class="fas fa-fw fa-rss-square" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].feed_label | default: "Feed" }}</a></li>
+      {% endunless %}
+    </ul>
+  </div>
+  pyOpenSci is a fiscally sponsored project of Community Initiatives
+
+  <div class="page__footer-copyright">&copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}</div>
+  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
+  <script src="/assets/js/dropdown.js"></script>

_includes/masthead.html

@@ -46,7 +46,6 @@
       {% endif %}
       -->
 
-      
       <ul class="hidden-links hidden"></ul>
         <!-- Burger button  - span class for screen readers-->
         <button class="hamburger__btn-toggle" type="button" count="1" aria-expanded="false">
@@ -56,47 +55,4 @@
       </nav>
       </div>
     </div> 
-  </div>
-
-
-<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
-
-<!-- This works now but when you open the menu its not saying aria expanded or 
-prompting the screen reader-->
-<script>
-  $(document).ready(function () {
-  $(".hamburger__btn-toggle").click(function (e) {
-    $(this).toggleClass("close");
-    // toggle expanded to try on click
-    $(this).attr('aria-expanded', function (i, attr) {
-    return attr == 'true' ? 'false' : 'true'});
-
-    e.preventDefault();
-    $(".nav__links").toggleClass("vertical");
-  });
-  
-  $(".dropdown").click(function (e) {
-    // close when user clicks nav
-    $(this).find(".dropdown-content").toggleClass("open");
-    // Handle making sure other drop menus are "closed" when another is open
-    $(this).siblings(".dropdown").find(".dropdown-content").removeClass("open");
-    $(this).siblings(".dropdown").find(".dropbtn").attr("aria-expanded", "false");
-
-    // this works but if user clicks on another drop down it should also return to closed
-    // with this code it just toggles the next thing that the user clicks so both 
-    // dropdowns are set to expanded:true
-    $(this).find(".dropbtn").attr('aria-expanded', function (i, attr) {
-    return attr == 'true' ? 'false' : 'true' });
-  });
-
-  // Close dropdown when u click outside of the nav ul
-  $(document).click(function (e) {
-    if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
-      $(".dropdown-content").removeClass("open");
-    }
-
-    
-  });
-});
-
-</script>
+  </div>

assets/js/dropdown.js

@@ -0,0 +1,35 @@
+//Jquery to manage drop downs and accessibility
+  $(document).ready(function () {
+  $(".hamburger__btn-toggle").click(function (e) {
+    $(this).toggleClass("close");
+    // toggle expanded to try on click
+    $(this).attr('aria-expanded', function (i, attr) {
+    return attr == 'true' ? 'false' : 'true'});
+
+    e.preventDefault();
+    $(".nav__links").toggleClass("vertical");
+  });
+  
+  $(".dropdown").click(function (e) {
+    // close when user clicks nav
+    $(this).find(".dropdown-content").toggleClass("open");
+    // Handle making sure other drop menus are "closed" when another is open
+    $(this).siblings(".dropdown").find(".dropdown-content").removeClass("open");
+    $(this).siblings(".dropdown").find(".dropbtn").attr("aria-expanded", "false");
+
+    // this works but if user clicks on another drop down it should also return to closed
+    // with this code it just toggles the next thing that the user clicks so both 
+    // dropdowns are set to expanded:true
+    $(this).find(".dropbtn").attr('aria-expanded', function (i, attr) {
+    return attr == 'true' ? 'false' : 'true' });
+  });
+
+  // Close dropdown when u click outside of the nav ul
+  $(document).click(function (e) {
+    if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
+      $(".dropdown-content").removeClass("open");
+    }
+
+    
+  });
+});