The accordion JavaScript selects all elements with the
.accordion-btn class and attaches a click event listener. When
a button is clicked, the script toggles the hidden class on the
corresponding .accordion-content element, revealing or hiding
it. It also updates the icon inside the button—switching +
when hidden and - when visible.
Relevant script/code include:
document.querySelectorAll('.accordion-btn').forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
content.classList.toggle('hidden');
const icon = button.querySelector('span');
icon.textContent = content.classList.contains('hidden') ? '+' : '-';
});
});
const navToggle = document.getElementById("nav-toggle");
const navMobile = document.getElementById("nav-mobile");
const navLinks = document.querySelectorAll(".nav-link");
const navbar = document.getElementById("navbar");
This code makes parts of a webpage interactive. First, it targets all elements with the class .accordion-btn—buttons meant to open or close sections. For each button, it adds a click event listener. When clicked, it finds the next element in the HTML (usually the content panel) and toggles a CSS class hidden, which shows or hides that content. It also updates a <span> inside the button to display + when the content is hidden and - when visible, giving users a clear visual cue. The second part selects navigation elements: navToggle is likely a button for opening a mobile menu, navMobile is the mobile menu itself, navLinks are individual menu links, and navbar is the main navigation bar. While these selections don’t act yet, they prepare the elements for future interactions. Overall, the code combines element selection and event handling to make accordions and navigation interactive.
Let's look at this script/code in detail:
const navToggle = document.getElementById("nav-toggle");
const navMobile = document.getElementById("nav-mobile");
const navLinks = document.querySelectorAll(".nav-link");
const navbar = document.getElementById("navbar");
These four lines of JavaScript retrieve and store references to specific elements in the webpage so they can be controlled later with interactive behavior. The first line selects the button that opens or closes the mobile navigation menu by targeting the element with the ID nav-toggle. The second line grabs the mobile navigation container itself—the element with the ID nav-mobile—so its visibility can be toggled when the user clicks the button. The third line collects all navigation link elements that use the class nav-link; this allows the script to loop through them, highlight the active link, or close the menu when a link is clicked. The final line selects the main navigation bar with the ID navbar, enabling additional features such as auto-hide on scroll or applying style changes. Together, these lines prepare the essential elements the script will manipulate to provide interactive navigation on the site.
document.querySelectorAll('.accordion-btn').forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
content.classList.toggle('hidden');
const icon = button.querySelector('span');
icon.textContent = content.classList.contains('hidden') ? '+' : '-';
});
});
This code selects all elements with the class .accordion-btn and loops through each one. For every button, it adds a click event listener. When the button is clicked, the script finds the next sibling element—usually the accordion’s content panel—and toggles the class hidden on it, which shows or hides the content depending on your CSS. It then looks inside the clicked button for a element (used as the icon). If the content is now hidden, the span’s text is set to "+"; if the content is visible, the span’s text changes to "-". In short, the code controls the opening and closing of accordion sections and updates the icon to reflect the current state.
Relevant Tailwind classes include:
hidden — hides accordion content by defaultbg-white, bg-gray-50border, roundedp-4font-semibold, text-gray-700These classes style the accordion container, layout, spacing, and typography, while JavaScript controls the interactive opening and closing behavior.
The mobile menu toggle uses JavaScript to control both
#nav-toggle (the button) and #nav-mobile (the
menu). When the button is clicked, JavaScript toggles the
hidden class and adjusts maxHeight to create a
smooth sliding animation.
Relevant script/code include:
navToggle.addEventListener("click", () => {
if (navMobile.classList.contains("hidden")) {
navMobile.classList.remove("hidden");
navMobile.style.maxHeight = navMobile.scrollHeight + "px";
} else {
navMobile.style.maxHeight = "0px";
setTimeout(() => navMobile.classList.add("hidden"), 300);
}
});
Important Tailwind classes used:
hidden — hides menu by defaultmd:hidden — shows mobile menu only on small screensflex, flex-col, space-y-2pb-4text-gray-700This setup ensures a responsive, mobile-friendly menu that appears only where needed and does not interfere with the desktop layout.
JavaScript dynamically adds or removes Tailwind classes to show which
navigation link is currently active. Each
.nav-link element includes a data-link attribute.
When one is clicked, the script adds text-blue-600 and
font-semibold to highlight the active link and removes these
classes from the others.
Relevant script/code include:
function setActiveLink(name) {
navLinks.forEach(link => {
if (link.dataset.link === name) {
link.classList.add("text-blue-600", "font-semibold");
} else {
link.classList.remove("text-blue-600", "font-semibold");
}
});
}
navLinks.forEach(link => {
link.addEventListener("click", () => {
const page = link.dataset.link;
setActiveLink(page);
});
});
This uses Tailwind utilities for:
text-blue-600font-semiboldThis gives users clear visual feedback on their position within the navigation.
The navbar automatically hides when the user scrolls down and reappears when
scrolling up. JavaScript checks window.pageYOffset to detect
scroll direction and applies transform: translateY(-100%) to
hide the navbar or translateY(0) to show it again.
Relevant script/code include:
let lastScrollTop = 0;
window.addEventListener("scroll", () => {
const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > lastScrollTop && scrollPos > 50) {
// scrolling down
navbar.style.transform = "translateY(-100%)";
} else {
// scrolling up
navbar.style.transform = "translateY(0)";
}
lastScrollTop = scrollPos <= 0 ? 0 : scrollPos;
});
Tailwind classes used on the navbar:
fixed, top-0, left-0w-fullshadowbg-whitetransition-all, duration-300These utilities control its position, background, shadow, and animations, creating a smooth sliding, user-friendly navbar.