Update script.js

Author: CodeHimBlog

js/script.js

@@ -1,41 +1,47 @@
 document.addEventListener("DOMContentLoaded", function () {
-        const toggleContributorsLink = document.getElementById("toggleContributors");
-        const contributorsList = document.getElementById("contributorsList");
-        const maxVisibleContributors = 5;
-        
-        // Only proceed if there are more than maxVisibleContributors
-        if (toggleContributorsLink) {
-            const contributors = Array.from(contributorsList.getElementsByClassName("contributor-item"));
-            const totalContributors = contributors.length;
+    const toggleContributorsLink = document.getElementById("toggleContributors");
+    const contributorsList = document.getElementById("contributorsList");
+    const maxVisibleContributors = 5;
 
-            // Set the initial state to show only the first 5 contributors
-            function toggleContributors() {
-                const isShowingAll = toggleContributorsLink.textContent === "View Less";
-                
-                // Show or hide contributors beyond the first 5
-                contributors.forEach((contributor, index) => {
-                    if (isShowingAll || index < maxVisibleContributors) {
-                        contributor.classList.remove("d-none");
-                    } else {
-                        contributor.classList.add("d-none");
-                    }
-                });
+    if (toggleContributorsLink) {
+        const contributors = Array.from(contributorsList.getElementsByClassName("contributor-item"));
+        const totalContributors = contributors.length;
 
-                // Toggle the link text based on the current state
-                if (isShowingAll) {
-                    toggleContributorsLink.textContent = `+${totalContributors - maxVisibleContributors} more Contributors`;
+        // Function to toggle contributors visibility
+        function toggleContributors() {
+            const isShowingAll = toggleContributorsLink.textContent === "View Less";
+            
+            // Show or hide contributors based on the current state
+            contributors.forEach((contributor, index) => {
+                if (isShowingAll || index < maxVisibleContributors) {
+                    contributor.classList.remove("d-none");
                 } else {
-                    toggleContributorsLink.textContent = "View Less";
+                    contributor.classList.add("d-none");
                 }
+            });
+
+            // Update the button text
+            if (isShowingAll) {
+                toggleContributorsLink.textContent = `+${totalContributors - maxVisibleContributors} more Contributors`;
+            } else {
+                toggleContributorsLink.textContent = "View Less";
             }
+        }
 
-            // Initial call to ensure the first 5 contributors are shown
-            toggleContributors();
+        // Initialize the state (start with showing only the first 5)
+        contributors.forEach((contributor, index) => {
+            if (index >= maxVisibleContributors) {
+                contributor.classList.add("d-none");
+            }
+        });
 
-            // Event listener for clicking the toggle link
-            toggleContributorsLink.addEventListener("click", function (e) {
-                e.preventDefault();
-                toggleContributors();  // Toggle contributors and update link text
-            });
-        }
-    });
+        // Set the initial button text
+        toggleContributorsLink.textContent = `+${totalContributors - maxVisibleContributors} more Contributors`;
+
+        // Add the click event listener
+        toggleContributorsLink.addEventListener("click", function (e) {
+            e.preventDefault();
+            toggleContributors(); // Toggle visibility and update text
+        });
+    }
+});