Doks

Scripts

Add JavaScript code to enhance your site with interactivity and custom behavior.

Script organization

JavaScript files live in assets/js/:

  • custom.js is for your custom JavaScript
  • Other files are bundled with your site during the build process

Add custom JavaScript

Edit assets/js/custom.js to add your own scripts:

custom.js
// Run code when the page loads
document.addEventListener("DOMContentLoaded", () => {
  // Example: Toggle behavior for FAQ accordions
  const details = document.querySelectorAll("details");

  details.forEach((detail) => {
    detail.addEventListener("toggle", () => {
      if (detail.open) {
        // Close other details when one opens
        details.forEach((other) => {
          if (other !== detail) other.open = false;
        });
      }
    });
  });
});

Keep scripts focused and avoid blocking page load. Use DOMContentLoaded to ensure the DOM is ready before running code.

Learn more

MDN Web Docs
Document Object Model

Learn about the DOM API and how to interact with HTML elements.

MDN Web Docs
DOM events

Reference for all available DOM events and event handling.

Hugo
Hugo asset processing

Process and bundle assets in your Hugo site.

Prev
Styles
Next
Images