Add data-toggle-focus attribute that triggers Toggler plugins on focus/blur

diff --git a/docs/pages/toggler.md b/docs/pages/toggler.md
index aa5ed4e83846c3685e10279eed39c8a211d9d686..59cb9a736bed4fe09d7233179f6575d8532fd812 100644 (file)
--- a/docs/pages/toggler.md
+++ b/docs/pages/toggler.md
@@ -75,3 +75,17 @@ To create an element that can be closed once, add the attribute `data-closable`.
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.</p>
 </div>
 ```
+
+---
+
+### Toggle on focus
+
+The `data-toggle` attribute only toggles classes/visibility on click. You can also have the toggle fire when an element is *focused* or *unfocused* using `data-toggle-focus`.
+
+```html_example
+<input type="text" data-toggle-focus="form-callout" placeholder="Click in here to reveal extra content">
+
+<div class="secondary callout is-hidden" id="form-callout" data-toggler="is-hidden">
+  <p>This is only visible when the above field has focus.</p>
+</div>
+```

diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index 1f0ab43ecfb510a975e36946bed7de1229239bb9..20f2bf5ded4a9da1a90da71b2359dd222d9ffec6 100644 (file)
--- a/js/foundation.util.triggers.js
+++ b/js/foundation.util.triggers.js
@@ -48,6 +48,11 @@ $(document).on('close.zf.trigger', '[data-closable]', function(e){
   }
 });
 
+$(document).on('focus.zf.trigger blur.zf.trigger', '[data-toggle-focus]', function() {
+  var id = $(this).data('toggle-focus');
+  $('#' + id).triggerHandler('toggle.zf.trigger', [$(this)]);
+});
+
 /**
 * Fires once after all other scripts have loaded
 * @function