Able to show and hide null-courses

static/js/totalTable.js

@@ -2,6 +2,7 @@ var loadingDiv = document.getElementById('loading');
 var errorDiv = document.getElementById('error');
 var resultDiv = document.getElementById('result');
 const timeout = 10000;
+var emptyCoursesShown = false;
 
 function getTable() {
     // Send XHR to totalTable
@@ -27,32 +28,50 @@ function setData(text) {
     loadingDiv.style.display = "none";
     errorDiv.style.display = "none";
     resultDiv.innerHTML = text;
+    emptyCoursesShown = false;
 
     var emptyCourses = document.getElementsByClassName('no-courses');
     if (emptyCourses.length === 0) {
         showEmptyCourses();
+        document.getElementById('extend').style.display = "none";
     } else {
         hideEmptyCourses();
         document.getElementById('extend').addEventListener('click', function() {
-            showEmptyCourses();
+            switchEmptyCourses();
         });
     }
+    updateExtendText();
 }
 
 function showEmptyCourses() {
+    emptyCoursesShown = true;
     var emptyCourses = document.getElementsByClassName('no-courses');
     for (var i = 0; i < emptyCourses.length; i++) {
         emptyCourses[i].style.display = "";
     }
-    document.getElementById('extend').style.display = "none";
 }
 
 function hideEmptyCourses() {
+    emptyCoursesShown = false;
     var emptyCourses = document.getElementsByClassName('no-courses');
     for (var i = 0; i < emptyCourses.length; i++) {
         emptyCourses[i].style.display = "none";
     }
-    document.getElementById('extend').style.display = "";
+}
+
+function switchEmptyCourses() {
+    if (emptyCoursesShown) {
+        hideEmptyCourses();
+    } else {
+        showEmptyCourses();
+    }
+    updateExtendText();
+}
+
+function updateExtendText() {
+    document.getElementById('extendText').innerHTML =
+        "Courses with null TD equivalent " + (emptyCoursesShown ? "(hide)" : "(show)");
+
 }
 
 function setError() {