https://www.kckcc.edu/_assets/js/kckcc-custom-scripts.js

1const accordion = document.querySelectorAll(".btn-accordion");
2accordion.forEach((el) => {
3	el.addEventListener("click", function () {
4		const icon = this.querySelector("i");
5		if (icon.classList.contains("fa-plus")) {
6			icon.classList.remove("fa-plus");
7			icon.classList.add("fa-minus");
8		} else {
9			icon.classList.remove("fa-minus");
10			icon.classList.add("fa-plus");
11		}
12	});
13});
14
15const sideNav = document.getElementById("hs-side-nav-collapse");
16
17function checkScreenSize() {
18	const width = window.innerWidth;
19	const height = window.innerHeight;
20	if (sideNav) {
21		// Add null check
22		if (width < 1024) {
23			// Smaller screens
24			sideNav.classList.add("hidden");
25			sideNav.classList.remove("block");
26			sideNav.classList.remove("open");
27		} else {
28			// Larger screens
29			sideNav.classList.remove("hidden");
30			sideNav.classList.add("open");
31			sideNav.classList.add("block");
32		}
33	}
34}
35
36// Initial check on page load
37window.onload = checkScreenSize;
38
39// Check on window resize
40document.addEventListener("DOMContentLoaded", checkScreenSize);
41
42// Add window resize event listener to respond to browser size changes
43window.addEventListener("resize", checkScreenSize);
44
45// Smooth scrolling for anchor links

46document.addEventListener("DOMContentLoaded", function () {
47	// Get all anchor links
48	const anchorLinks = document.querySelectorAll('a[href^="#"]');
49
50	anchorLinks.forEach((link) => {
51		link.addEventListener("click", function (e) {
52			e.preventDefault();
53
54			const targetId = this.getAttribute("href").substring(1);
55			const targetElement = document.getElementById(targetId);
56
57			if (targetElement) {
58				// Smooth scroll to the target element
59				targetElement.scrollIntoView({
60					behavior: "smooth",
61					block: "start",
62				});
63
64				// Optional: Update URL without jumping
65				history.pushState(null, null, `#${targetId}`);
66			}
67		});
68	});
69
70	// Highlight active navigation links based on viewport
71	const navLinks = document.querySelectorAll('.side-nav-links a[href^="#"]');
72	const sections = document.querySelectorAll("section[id]");
73
74	// Only set up intersection observer if we have both nav links and sections
75	if (navLinks.length > 0 && sections.length > 0) {
76		// Create intersection observer
77		const observer = new IntersectionObserver(
78			(entries) => {
79				entries.forEach((entry) => {
80					if (entry.isIntersecting) {
81						// Remove active class from all links
82						navLinks.forEach((link) => {
83							link.classList.remove("active-link");
84						});
85
86						// Add active class to corresponding nav link
87						const targetLink = document.querySelector(`.side-nav-links a[href="#${entry.target.id}"]`);
88						if (targetLink) {
89							targetLink.classList.add("active-link");
90						}
91					}
92				});
93			},
94			{
95				threshold: 0.3, // Trigger when 30% of the section is visible
96				rootMargin: "-50px 0px -50px 0px", // Adjust for better trigger point
97			}
98		);
99
100		// Observe all sections
101		sections.forEach((section) => {
102			observer.observe(section);
103		});
104	}
105
106	// Back to top button functionality
107	const backToTopBtn = document.getElementById("backToTopBtn");
108
109	// Only add event listeners if the element exists
110	if (backToTopBtn) {
111		// Show/hide button based on scroll position
112		window.addEventListener("scroll", function () {
113			if (window.pageYOffset > 300) {
114				backToTopBtn.classList.add("show");
115			} else {
116				backToTopBtn.classList.remove("show");
117			}
118		});
119
120		// Smooth scroll to top when button is clicked
121		backToTopBtn.addEventListener("click", function () {
122			window.scrollTo({
123				top: 0,
124				behavior: "smooth",
125			});
126		});
127	}
128});
129
130/* Button hover effects */
131let buttons = document.querySelectorAll(".btn");
132
133let hoverTL = gsap.timeline();
134
135buttons.forEach((btn) => {
136	btn.addEventListener("mouseenter", () => {
137		hoverTL.from(btn, { scale: 1, rotate: 0, duration: 0.2, ease: "steps(4)", overwrite: true });
138		hoverTL.to(btn, { scale: 0.95, rotate: 0, duration: 0.2, ease: "power.inOut(4)", overwrite: true });
139	});
140	btn.addEventListener("mouseleave", () => {
141		hoverTL.to(btn, { scale: 1.0, duration: 0.2, ease: "steps(4)", overwrite: true });
142	});
143});