Merge pull request #1234 from ElixirTeSS/fix-see-more

Fix `tess-expandable` behaviour when multiple under the same parent e…

Author: fbacall

app/assets/javascripts/application.js

@@ -277,6 +277,9 @@ document.addEventListener("turbolinks:load", function(e) {
     LearningPaths.init();
 
     $('.tess-expandable').each(function () {
+        if (this.dataset.origHeight) {
+            return;
+        }
         var limit = this.dataset.heightLimit || 300;
 
         if (this.clientHeight > limit) {
@@ -286,32 +289,11 @@ document.addEventListener("turbolinks:load", function(e) {
             this.dataset.origHeight = this.clientHeight;
             this.style.maxHeight = '' + limit + 'px';
             this.classList.add('tess-expandable-closed');
-            var btn = $('<a href="#" class="tess-expandable-btn">Show more</a>');
+            const btn = $('<a href="#" class="tess-expandable-btn">Show more</a>');
             btn.insertAfter($(this));
         }
     });
 
-    $(document).on('click', '.tess-expandable-btn', function (event) {
-        event.preventDefault();
-        var div = this.parentElement.querySelector('.tess-expandable');
-        var maxHeight = parseInt(div.dataset.origHeight) + 80;
-        var limit = parseInt(div.dataset.heightLimit || "300");
-
-        if (div.classList.contains('tess-expandable-closed')) {
-            div.classList.add('tess-expandable-open');
-            div.classList.remove('tess-expandable-closed');
-            div.style.maxHeight = '' + maxHeight + 'px';
-            this.innerHTML = 'Show less';
-        } else {
-            div.classList.remove('tess-expandable-open');
-            div.classList.add('tess-expandable-closed');
-            div.style.maxHeight = '' + limit + 'px';
-            this.innerHTML = 'Show more';
-        }
-
-        return false;
-    });
-
     $('.faq .question dt').click(function () {
         var button = $(this).find('.expand');
         var sign = button.text();
@@ -380,6 +362,36 @@ $(document).on('click', '[href="#activity_log"]', function () {
     return false;
 });
 
+$(document).on('click', '.tess-expandable-btn', function (event) {
+    event.preventDefault();
+    let div = this.previousElementSibling;
+
+    if (!div || !div.classList.contains('tess-expandable')) {
+        div = this.parentElement.querySelector('.tess-expandable');
+    }
+
+    if (!div) {
+        return false;
+    }
+
+    const maxHeight = parseInt(div.dataset.origHeight) + 80;
+    const limit = parseInt(div.dataset.heightLimit || "300");
+
+    if (div.classList.contains('tess-expandable-closed')) {
+        div.classList.add('tess-expandable-open');
+        div.classList.remove('tess-expandable-closed');
+        div.style.maxHeight = '' + maxHeight + 'px';
+        this.innerHTML = 'Show less';
+    } else {
+        div.classList.remove('tess-expandable-open');
+        div.classList.add('tess-expandable-closed');
+        div.style.maxHeight = '' + limit + 'px';
+        this.innerHTML = 'Show more';
+    }
+
+    return false;
+});
+
 // sticky-navbar feature
 document.addEventListener('turbolinks:load', function () {