https://www.kent.edu/themes/custom/ksu_base_zurb/js/timeline.js?v=10.6.17&tlsd5q

1document.addEventListener('DOMContentLoaded', function() {
2  // Select all elements with the class 'the-timeline__item'
3  const timelineItems = document.querySelectorAll('.the-timeline__item');
4
5  // Loop through each timeline item
6  timelineItems.forEach(item => {
7    // Add a click event listener to each item
8    item.addEventListener('click', function() {
9      // Toggle the 'the-timeline__item_active' class on the clicked item
10      item.classList.toggle('the-timeline__item_active');
11    });
12  });
13
14  // Select all navigation items
15  const navigationItems = document.querySelectorAll('.the-timeline-navigation__item');
16
17  // Loop through each navigation item
18  navigationItems.forEach(item => {
19    // Add a click event listener to each navigation item
20    item.addEventListener('click', function(event) {
21      // Get the anchor link from the href attribute
22      const anchor = item.querySelector('a').getAttribute('href');
23      const targetId = anchor.substring(1); // Remove the '#' to get the ID
24
25      // Find the target element by ID
26      const targetElement = document.getElementById(targetId);
27      if (targetElement) {
28        // Smooth scroll to the target element
29        targetElement.scrollIntoView({ behavior: 'smooth' });
30
31        // Update the URL hash without reloading the page
32        history.pushState(null, null, anchor);
33      }
34
35      // Remove 'the-timeline-navigation__item_active' from all items
36      navigationItems.forEach(navItem => navItem.classList.remove('the-timeline-navigation__item_active'));
37
38      // Add 'the-timeline-navigation__item_active' to the clicked item
39      item.classList.add('the-timeline-navigation__item_active');
40    });
41  });
42
43  // Add functionality to toggle class on scroll
44  const fbTimelineWrapper = document.querySelector('.paragraph--type--fb-timeline'); // Check for the specific wrapper
45  if (fbTimelineWrapper) {
46    const timelineSection = fbTimelineWrapper.querySelector('.the-timeline');
47    const timelineRail = fbTimelineWrapper.querySelector('.the-timeline__rail');
48
49    if (timelineSection && timelineRail) {
50      // Create an IntersectionObserver instance
51      const observer = new IntersectionObserver(
52        (entries) => {
53          entries.forEach((entry) => {
54            if (entry.isIntersecting) {
55              timelineRail.classList.add('in-view');
56            } else {
57              timelineRail.classList.remove('in-view');
58            }
59          });
60        },
61        {
62          root: null, // Use the viewport as the root
63          threshold: 0.1, // Trigger when 10% of the section is visible
64        }
65      );
66
67      // Observe the timeline section
68      observer.observe(timelineSection);
69    }
70  }
71});