fix: return to initial state when reseting hash in Accordion & Tabs #11100

When deep-linking is enabled and the user goes back in the history up to when no hash is set, display the initially-selected content/tab instead of staying with the content/tab that was selected the first.

Closes https://github.com/zurb/foundation-sites/issues/11100
Replaces https://github.com/zurb/foundation-sites/issues/11101

Co-authored-by: Jamie Chong <jamie@hippocurious.com>

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index 67481c85d9b30d915288b1a16b075697205c1c57..f5c22f7de722291a76a380deaac5c420b35bd702 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -59,15 +59,25 @@ class Accordion extends Plugin {
 
       $content.attr({'role': 'tabpanel', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id});
     });
+
     var $initActive = this.$element.find('.is-active').children('[data-tab-content]');
     this.firstTimeInit = true;
-    if($initActive.length){
+    if ($initActive.length) {
+      // Save up the initial hash to return to it later when going back in history
+      this._initialAnchor = $initActive.prev('a').attr('href');
+
       this.down($initActive, this.firstTimeInit);
       this.firstTimeInit = false;
     }
 
     this._checkDeepLink = () => {
       var anchor = window.location.hash;
+
+      // if there is no anchor, return to the initial panel
+      if (!anchor.length && this._initialAnchor) {
+        anchor = this._initialAnchor;
+      }
+
       //need a hash and a relevant anchor in this tabset
       if(anchor.length) {
         var $link = this.$element.find('[href$="'+anchor+'"]'),

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 1b191366c12af30b4acae3248a09d95ad09942a6..564af2f232fe6c7f046654e9050caa894f3e14fe 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -73,6 +73,11 @@ class Tabs extends Plugin {
         'aria-labelledby': linkId
       });
 
+      // Save up the initial hash to return to it later when going back in history
+      if (isActive) {
+        _this._initialAnchor = `#${hash}`;
+      }
+
       if(!isActive) {
         $tabContent.attr('aria-hidden', 'true');
       }
@@ -85,6 +90,7 @@ class Tabs extends Plugin {
         });
       }
     });
+
     if(this.options.matchHeight) {
       var $images = this.$tabContent.find('img');
 
@@ -98,8 +104,14 @@ class Tabs extends Plugin {
      //current context-bound function to open tabs on page load or history hashchange
     this._checkDeepLink = () => {
       var anchor = window.location.hash;
+
+      // if there is no anchor, return to the initial tab
+      if (!anchor.length && this._initialAnchor) {
+        anchor = this._initialAnchor;
+      }
+
       //need a hash and a relevant anchor in this tabset
-      if(anchor.length) {
+      if (anchor.length) {
         var anchorNoHash = (anchor.indexOf('#') >= 0 ? anchor.slice(1) : anchor);
         var $link = this.$element.find(`[href$="${anchor}"],[data-tabs-target="${anchorNoHash}"]`).first();
         if ($link.length) {