Allow toggles to be closed when clicking anywhere else on the page

CHANGELOG.md

@@ -14,6 +14,7 @@
 * Support for two off-canvas elements ([52a76560](https://github.com/a2labs/barekit/commit/52a7656034e6d26328597ae77ac5831e3417e7cf))
 * Added ability to input custom value to breakpoint mixin ([2372edc0](https://github.com/a2labs/barekit/commit/2372edc07b9082bf7ef6c2a90f93e19ade26855f))
 * Added `.editorconfig` file. ([26175e87](https://github.com/a2labs/barekit/commit/26175e87d9ad1b2df8dbecdeb4e418fe27d4f73e))
+* Toggle "triggers" now get an active class (`toggle-trigger-shown`) added when toggled.
 
 
 #### Breaking Changes

example.html

@@ -168,6 +168,10 @@ <h1>Toggle</h1>
 
         <div class="toggle" id="toggle-example">Hello!</div>
 
+         <a href="#" class="toggle-trigger" data-options='{ "toggle": "toggle-example2", "closeOnClick": true }'>Toggle (close on click)</a>
+
+        <div class="toggle" id="toggle-example2">Hello again!</div>
+
         <h1>Tabs</h1>
 
         <ul class="tabs">

js/modules/toggle.js

@@ -8,7 +8,8 @@
 		className: 'toggle-trigger',
 		toggle: '',
 		activeTriggerClass: 'toggle-trigger-shown',
-		activeClass: 'toggle-shown'
+		activeClass: 'toggle-shown',
+		closeOnClick: false
 	};
 
 	Toggle.prototype.init = function (el, options) {
@@ -22,11 +23,22 @@
 		// Add the class
 		this.$el.addClass(this.options.className);
 
+		if (this.options.closeOnClick == true) {
+			$(document).on('click', function (e) {
+				$('#' + self.options.toggle).removeClass(self.options.activeClass);
+			});
+
+			$('#' + this.options.toggle).on('click', function (e) {
+				e.stopPropagation();
+			});
+		}
+
 		this.$el.on('click.bk.toggle', function (e) {
 			var $this = $(this);
 
 			e.preventDefault();
-
+			e.stopPropagation();
+
 			self.doToggle();
 		});
 	};
@@ -42,6 +54,13 @@
 		$target.toggleClass(this.options.activeClass);
 	};
 
+	Toggle.prototype.unToggle = function () {
+		var self = this,
+			$target = $('#' + this.options.toggle);
+
+		$target.removeClass(this.options.activeClass);
+	}
+
 	Toggle.prototype.destroy = function () {
 		this.$el.off(".toggle");
 	};