fix history to work with back button within page

diff --git a/docs/pages/accordion.md b/docs/pages/accordion.md
index fb157a143e29235d5e86b18c4eed8b66da2ad5f0..615880d6e636c241dd4e7d5583719151540c2715 100644 (file)
--- a/docs/pages/accordion.md
+++ b/docs/pages/accordion.md
@@ -140,7 +140,7 @@ Add the attribute `data-deep-link="true"` to a accordion to:
 - allow users to open a particular accordion panel at page load with a hash-appended URL
 
 ```html_example
-<ul class="accordion" data-accordion data-deep-link="true" id="deeplinked-accordion">
+<ul class="accordion" data-accordion data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" id="deeplinked-accordion">
   <li class="accordion-item is-active" data-accordion-item>
     <a href="#deeplink1" class="accordion-title">Accordion 1</a>
     <div class="accordion-content" data-tab-content id="deeplink1">

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index 3449f7bef4c40708876ca871daf08901dbcfb9fb..13977624f4feabeab2b12dcd8ba8c85d5438b645 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -56,15 +56,14 @@ class Accordion {
 
       $content.attr({'role': 'tabpanel', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id});
     });
-    var $initActive = this.$element.find('.is-active').children('[data-tab-content]'),
-    firstTimeInit = true;
+    var $initActive = this.$element.find('.is-active').children('[data-tab-content]');
+    this.firstTimeInit = true;
     if($initActive.length){
-      this.down($initActive, firstTimeInit);
-      firstTimeInit = false;
+      this.down($initActive, this.firstTimeInit);
+      this.firstTimeInit = false;
     }
 
-    //use browser to open a tab, if it exists in this tabset
-    if (this.options.deepLink) {
+    this._checkDeepLink = () => {
       var anchor = window.location.hash;
       //need a hash and a relevant anchor in this tabset
       if(anchor.length) {
@@ -73,8 +72,8 @@ class Accordion {
 
         if ($link.length && $anchor) {
           if (!$link.parent('[data-accordion-item]').hasClass('is-active')) {
-            this.down($anchor, firstTimeInit);
-            firstTimeInit = false;
+            this.down($anchor, this.firstTimeInit);
+            this.firstTimeInit = false;
           };
 
           //roll up a little to show the titles
@@ -95,6 +94,11 @@ class Accordion {
       }
     }
 
+    //use browser to open a tab, if it exists in this tabset
+    if (this.options.deepLink) {
+      this._checkDeepLink();
+    }
+
     this._events();
   }
 
@@ -138,6 +142,9 @@ class Accordion {
         });
       }
     });
+    if(this.options.deepLink) {
+      $(window).on('popstate', this._checkDeepLink);
+    }
   }
 
   /**
@@ -239,6 +246,9 @@ class Accordion {
   destroy() {
     this.$element.find('[data-tab-content]').stop(true).slideUp(0).css('display', '');
     this.$element.find('a').off('.zf.accordion');
+    if(this.options.deepLink) {
+      $(window).off('popstate', this._checkDeepLink);
+    }
 
     Foundation.unregisterPlugin(this);
   }