Fix broken/multiple events firing due to Turbolinks

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) {
@@ -287,32 +290,10 @@ document.addEventListener("turbolinks:load", function(e) {
             this.style.maxHeight = '' + limit + 'px';
             this.classList.add('tess-expandable-closed');
             const btn = $('<a href="#" class="tess-expandable-btn">Show more</a>');
-            btn[0].expandableTarget = this;
             btn.insertAfter($(this));
         }
     });
 
-    $(document).on('click', '.tess-expandable-btn', function (event) {
-        event.preventDefault();
-        const div = this.expandableTarget;
-        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;
-    });
-
     $('.faq .question dt').click(function () {
         var button = $(this).find('.expand');
         var sign = button.text();
@@ -381,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.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 () {