Fixed "show-more-btn" toggle logic and added optional "collapseAfter" parameter (#473)

* fixed "show-more-btn" toggle logic

* allow customization of number of items to show in "taken courses" when before collapsing

* renamed treshold param to collapseAfter

Co-authored-by: Fabio Fenoglio <fabio.fenoglio@eng.it>

1 files changed, 8 insertions, 10 deletions

diff --git a/static/js/main.js b/static/js/main.js
index d1c3689..ff688dd 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -158,18 +158,16 @@ function toggleCourseVisibility(elem) {
   }
 
   // toggle hidden-course class from the third elements
-  for (var i = 0; i < courses.length; i++) {
-    if (i > 1 && courses[i].classList !== null) {
-      courses[i].classList.toggle("hidden-course");
+  for (const course of courses) {
+    if (course.classList.contains("hidden-course") || course.classList.contains("toggled-hidden-course")) {
+      course.classList.toggle("hidden-course");
+      course.classList.add("toggled-hidden-course");
     }
   }
 
-  // toggle the current button visibility
-  elem.classList.toggle("hidden");
-  // toggle the alternate button visibility
-  if  (elem.id === "show-more-btn"){
-    document.getElementById("show-less-btn").classList.toggle("hidden");
-  }else{
-    document.getElementById("show-more-btn").classList.toggle("hidden");
+  // toggle the buttons visibility
+  let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
+  for (const buttonToToggle of buttonsToToggle) {
+    buttonToToggle.classList.toggle("hidden");
   }
 }