// Show more rows in the taken courses table
function toggleCourseVisibility(elem) {

  // find the courses
  let courses = elem.parentNode.getElementsByClassName("course");
  if (courses == null) {
    return
  }

  // toggle hidden-course class from the third elements
  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 buttons visibility
  let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
  for (const buttonToToggle of buttonsToToggle) {
    buttonToToggle.classList.toggle("hidden");
  }
}

window.addEventListener('DOMContentLoaded', () => {
  const $els = [
    document.getElementById('show-more-btn'),
    document.getElementById('show-less-btn'),
  ];

  $els.filter(($el) => $el != null).forEach(($el) => 
    $el.addEventListener('click', ({target}) => 
      toggleCourseVisibility(target)));
});