diff options
| -rw-r--r-- | layouts/partials/sections/education-alt.html | 7 | ||||
| -rw-r--r-- | layouts/partials/sections/education.html | 7 | ||||
| -rw-r--r-- | static/js/main.js | 18 |
3 files changed, 16 insertions, 16 deletions
diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html index 2994fc5..7b748c7 100644 --- a/layouts/partials/sections/education-alt.html +++ b/layouts/partials/sections/education-alt.html @@ -53,6 +53,7 @@ </div> {{ end }} {{ if .takenCourses }} + {{ $collapseAfter := .takenCourses.collapseAfter | default 2 }} <div class="taken-courses"> <h6 class="text-muted">{{ i18n "taken_courses" }}</h6> {{ if .takenCourses.showGrades }} @@ -65,7 +66,7 @@ </thead> <tbody> {{ range $index,$course := .takenCourses.courses }} - <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}"> + <tr class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}"> <td>{{ $course.name }}</td> {{ if not $hideScale }}<td>{{ $course.outOf }}</td>{{ end }} <td>{{ $course.achieved }}</td> @@ -76,11 +77,11 @@ {{ else }} <ul> {{ range $index,$course := .takenCourses.courses }} - <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li> + <li class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">{{ $course.name }}</li> {{ end }} </ul> {{ end }} - {{ if gt (len .takenCourses.courses) 2 }} + {{ if gt (len .takenCourses.courses) $collapseAfter }} <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" onclick="toggleCourseVisibility(this);" id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button> <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html index f9ba8fc..ea79579 100644 --- a/layouts/partials/sections/education.html +++ b/layouts/partials/sections/education.html @@ -54,6 +54,7 @@ </div> {{ end }} {{ if .takenCourses }} + {{ $collapseAfter := .takenCourses.collapseAfter | default 2 }} <div class="taken-courses"> <h6 class="text-muted">{{ i18n "taken_courses"}}</h6> {{ if .takenCourses.showGrades }} @@ -66,7 +67,7 @@ </thead> <tbody> {{ range $index,$course := .takenCourses.courses }} - <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}"> + <tr class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}"> <td>{{ $course.name }}</td> {{ if not $hideScale }}<td>{{ $course.outOf }}</td>{{ end }} <td>{{ $course.achieved }}</td> @@ -77,11 +78,11 @@ {{ else }} <ul> {{ range $index,$course := .takenCourses.courses }} - <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li> + <li class="course {{ if ge $index $collapseAfter }}hidden-course{{ end}}">{{ $course.name }}</li> {{ end }} </ul> {{ end }} - {{ if gt (len .takenCourses.courses ) 2 }} + {{ if gt (len .takenCourses.courses ) $collapseAfter }} <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" onclick="toggleCourseVisibility(this);" id="show-more-btn">{{ i18n "show_more"}}</button> <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" 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"); } } |