Merge pull request #20 from nomensa/cc-90

Added option to close content when clicking somewhere else on the page

README.md

@@ -56,6 +56,12 @@ Type: `function`
 
 Description: Callback when the plugin is destroyed
 
+### closeOnClick
+
+Type: `boolean`
+
+Description: Collapses the content when clicking elsewhere on the page. This only works if the content has been triggered to begin with and not open by default.
+
 ### containerClass
 
 Type: `string`
@@ -187,4 +193,7 @@ $ grunt --connect
 
 Copyright © 2014 [@nomensa](http://nomensa.com)
 
-Licensed under [MIT](http://opensource.org/licenses/mit-license.php)
+Licensed under [MIT](http://opensource.org/licenses/mit-license.php)
+
+## Changelog
+* Added ability to close content when clicking outside of that content.

index.html

@@ -56,8 +56,7 @@ <h2>Example C</h2>
 
             <h3 id="triggerC">Contact details</h3>
             <div class="example exampleC">
-                <p>Telephone 01234 567 890</p>
-                <p>Email <a href="mailto:test@test.com">test@test.com</a></p>
+                <p>Inserts an accessible buttons/links to hide and show sections of content.</p>
             </div><!-- .exampleC -->
 
             <h3>Initialisation</h3>
@@ -71,15 +70,31 @@ <h3>Initialisation</h3>
 </code>
 </pre>
 
+            <h2>Example D</h2>
+            <p>An example that closes the content when clicking elsewhere in the document.</p>
+            <p>The content must have been opened up through a trigger press or click for this to work.</p>
+            <div class="example exampleD">
+                <p>Closes on click elsewhere in the document.</p>
+            </div><!-- .exampleC -->
+
+            <h3>Initialisation</h3>
+<pre>
+<code data-language="javascript">
+$(".exampleD").hideShow({
+    closeOnClick: true
+});
+</code>
+</pre>
+
 
             <h2>Public methods</h2>
 
-            <div class="example exampleD">
+            <div class="example exampleE">
                 <p>Text content to be hidden text content to be hidden text content to be hidden text content to be hidden</p>
             </div><!-- .exampleD -->
 
-            <h3 id="triggerE">Contact details</h3>
-            <div class="example exampleE">
+            <h3 id="triggerF">Contact details</h3>
+            <div class="example exampleF">
                 <p>Telephone 01234 567 890</p>
                 <p>Email <a href="mailto:test@test.com">test@test.com</a></p>
             </div><!-- .exampleE -->
@@ -111,10 +126,14 @@ <h3 id="triggerE">Contact details</h3>
                     state: 'hidden',
                     triggerElementTarget: '#triggerC'
                 });
+
+                $('.exampleD').hideShow({
+                    closeOnClick: true
+                });
             });
 
             (function() {
-                var target = $('.exampleD'),
+                var target = $('.exampleE'),
                     buttonContainer = $('<div />'),
                     buttonRebuild = $('<button class="js-btn">Rebuild</button>'),
                     buttonDestroy = $('<button class="js-btn">Destroy</button>');
@@ -146,15 +165,15 @@ <h3 id="triggerE">Contact details</h3>
             })();
 
             (function() {
-                var target = $('.exampleE'),
+                var target = $('.exampleF'),
                     buttonContainer = $('<div />'),
                     buttonRebuild = $('<button class="js-btn">Rebuild</button>'),
                     buttonDestroy = $('<button class="js-btn">Destroy</button>');
 
                 target.hideShow({
                     speed: '600',
                     state: 'hidden',
-                    triggerElementTarget: '#triggerE',
+                    triggerElementTarget: '#triggerF',
                     triggerType: 'button'
                 });
 

jquery.hideShow.js

@@ -3,7 +3,7 @@
  *
  * @description: Inserts an accessible buttons/links to hide and show sections of content
  * @source: https://github.com/nomensa/jquery.hide-show.git
- * @version: '1.0.0'
+ * @version: '1.0.1'
  *
  * @author: Nomensa
  * @license: licenced under MIT - http://opensource.org/licenses/mit-license.php
@@ -34,6 +34,8 @@
         containerCollapsedClass: 'js-hide-show_content--collapsed',
         // the class name applied to the visible element
         containerExpandedClass: 'js-hide-show_content--expanded',
+        // Whether the content closes when clicking elsewhere in the document
+        closeOnClick: false,
         // the text to apply to the button/link phrase for the trigger element when visible
         hideText: 'Hide Content',
         // Method that is used to insert the trigger button into the location, options are 'after', 'append' 'before' and 'prepend'
@@ -174,7 +176,30 @@
                 event.preventDefault();
 
                 self.toggle();
+
+                // Note that this is meant to work for content that has been triggered
+                // and not open by default
+                if (self.options.closeOnClick === true) {
+                    // If open
+                    if (self.element.attr('aria-hidden') === 'false') {
+                        // Hide the content if clicked elsewhere in the document
+                        $(document).mouseup(function(event) {
+                            var content = self.element,
+                                target = event.target;
+
+                            // If clicked on elsewhere (nor a descendant of the content)
+                            if (!content.is(target) && content.has(target).length === 0) {
+
+                                // If the trigger button is not clicked on
+                                if (!self.triggerElement.is(target)) {
+                                    self.close();
+                                }
+                            }
+                        });
+                    }
+                }
             };
+
             return self.handleClick;
         }
 

jquery.hideShow.spec.js

@@ -366,6 +366,28 @@ describe('hide-show', function() {
         });
 
         it('should trigger "callbackDestroy" once the plugin has been destroyed', function() {
+            var mocks,
+                el,
+                button;
+
+            el = testElement.hideShow({
+                closeOnClick: true
+            });
+            button = testElement.siblings('.js-hide-show_btn');
+
+            // Click to close the content that is open by default
+            button.click();
+            // Click to open the content
+            button.click();
+            // Move the content so that it is off the page
+            el.hide();
+            // Click elsewhere on the page
+            $(document).mouseup();
+
+            expect(testElement.attr('aria-hidden')).toBe('true');
+        });
+
+        it('should hide the content if clicked elsewhere in the document', function() {
             var mocks,
                 el,
                 destroyed = false;