.gitignore

@@ -3,8 +3,7 @@
 *.patch
 .DS_Store
 .settings
-Guardfile
-Gemfile
 spec/*_spec.js
 TODO
 node_modules
+coverage

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+ - "stable"
+addons:
+  chrome: stable
+script:
+ - npm install
+ - npm run test

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Daniel Stocks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,29 +1,25 @@
 # jQuery Collapse
 
-A lightweight and flexible jQuery plugin that allows you to collapse content. A feature also
-known as 'progressive disclosure'.
+A lightweight and flexible jQuery plugin that allows you to collapse content. A feature also known as 'progressive disclosure'.
 
-*NOTICE: As of August 2012 this plugin has been rewritten from scratch.
-The old version is no longer maintained or supported.*
-
-jQuery Collapse requires jQuery 1.7 or newer.
-
-Enjoy!
+jQuery Collapse is tested against the latest version of jQuery but requires at least jQuery 1.7.0.
 
+[![Build Status](https://travis-ci.org/danielstocks/jQuery-Collapse.png?branch=master)](https://travis-ci.org/danielstocks/jQuery-Collapse)
+[![Code Climate](https://codeclimate.com/github/danielstocks/jQuery-Collapse.png)](https://codeclimate.com/github/danielstocks/jQuery-Collapse)
+[![Coveralls](https://img.shields.io/coveralls/danielstocks/jQuery-Collapse/master.svg)](https://coveralls.io/github/danielstocks/jQuery-Collapse?branch=master)
 
 ## Features
 
 - [WAI ARIA](http://dev.opera.com/articles/view/introduction-to-wai-aria/) compliant
 - Lightweight (~1.2kb minified and gzipped)
 - Cross Browser compliant (Tested in >= IE6, Firefox, Safari, Chrome, Opera)
-- **Accordion** behaviour can be enabled. 
+- **Accordion** behaviour can be enabled.
 - **Persistence** to remember open sections on page reload!
 
 
 ### Demo
 
-A demo showcasing all the features of the plugin can be found at 'demo/demo.html' in
-this repository.
+A demo showcasing all the features of the plugin can be found at 'demo/demo.html' in this repository.
 
 ## Usage
 
@@ -37,7 +33,7 @@ Load jQuery and the jQuery Collapse plugin into your document:
 Here's some sample HTML markup:
 
 ```html
-<div id="demo" data-collapse>
+<div data-collapse>
   <h2>Fruits</h2>
   <ul>
     <li>Apple</li>
@@ -51,21 +47,43 @@ Here's some sample HTML markup:
 </div>
 ```
 
-That's it! The *data-collapse* attribute will automatically trigger the script. 
+That's it! The *data-collapse* attribute will automatically trigger the script.
 
-### Open/Collapse section by default 
+### Open/Collapse section by default
 
-The standard behaviour is to collapse all the sections on page load. 
+The standard behaviour is to collapse all the sections on page load.
 If you want to show a section to the user on page load you can
 achieve this by adding an 'open' class to the section heading
 
 ```html
-<div id="demo" data-collapse>
+<div data-collapse>
   <h2 class="open">I'm open by default</h2>
   <p>Yay</p>
 </div>
 ```
 
+### Open all sections
+
+You can open or close sections by utilizing events. Assume you have the following markup:
+
+```html
+<div id="test" data-collapse>
+  <h2>Section 1</h2>
+  <p>I'm first</p>
+  <h2>Section 2</h2>
+  <p>I'm second/p>
+</div>
+```
+You can now trigger events on the elements you want to affect. For instance:
+
+```js
+$("#test").trigger("open") // Open all sections
+$("#test").trigger("close") // Close all sections
+$("#test h2 a").first().trigger("open") // Open first section
+```
+
+For further information, please refer to the [events](#events) documentation.
+
 ## JavaScript usage
 
 If you'd rather omit the 'data-collapse' attribute in the HTML and load the plugin via jQuery, you can:
@@ -113,22 +131,70 @@ new jQueryCollapse($("#demo"), {
 });
 ```
 
+#### External markup example
+
+You can also just use an arbitrary link on a page to collapse\expand a section:
+
+```html
+<a id="toggle" href="#demo">Toggle section</a>
+<div id="demo" data-collapse>
+    <h2>Summary</h2>
+    <div>details...</div>
+</div>
+```
+
+Then attach an event handler to your link and make use of jQuery Collapse events to toggle the section:
+
+```js
+$("#toggle").click(function() {
+  $(this.hash).trigger("toggle");
+});
+```
+
+#### Custom click query
+
+Sometimes you want to customize what element inside the collapse summary that should trigger the open/close action. Consider the following markup:
+
+```html
+<div id="custom-click-query">
+  <div class="test">
+    <a href="http://www.google.com">Google.com</a> <span class="toggle">info</span>
+  </div>
+  <div>
+    <p>Find stuff on google</p>
+  </div>
+  <div class="test">
+    <a href="http://www.twitter.com">Twitter.com</a> <span class="toggle">info</span>
+  </div>
+  <div>
+    <p>Tweet stuff on twitter</p>
+  </div>
+</div>
+```
+
+Now use the clickQuery option to trigger the action only when the span is clicked
+
+```js
+$("#custom-click-query").collapse({
+  clickQuery: "span.toggle"
+});
+```
+
 
 ## Accordion
 
 To activate the accordion behaviour set 'accordion' as the value of the 'data-collapse' attribute:
 
 ```html
-<div id="demo" data-collapse="accordion">
+<div data-collapse="accordion">
   ...
 </div>
 ```
 
 
 ## Persistence
 
-
-By default, if the user reloads the page all the sections will be closed. 
+By default, if the user reloads the page all the sections will be closed.
 If you want previously collapsed sections to stay open you can add 'persist' to the data-collapse attribute:
 
 ```html
@@ -143,7 +209,7 @@ scripts.
 <script src="jquery.collapse_storage.js"></script>
 ```
 
-Please note: the target element will need an ID in order for the
+As in the example above, the target element (#demo) **will require an ID** in order for the
 persistence to work.
 
 You can combine the accordion and persistence options by adding
@@ -161,7 +227,7 @@ to work but without any persistence.
 
 ### Internet Explorer =< 7 Support
 
-For IE 6-7 you'll need to include the cookie storage and JSON2 libraries 
+For IE 6-7 you'll need to include the cookie storage and JSON2 libraries
 for the cookie storage support to work properly:
 
 ```html
@@ -185,6 +251,8 @@ the plugin with JavaScript.
 * **close** (function) : Custom function for collapsing section (default: function(){ this.hide() })
 * **accordion** (bool) : Enable accordion behaviour by setting this option to 'true'
 * **persist** (bool) : Enable persistence between page loads by setting this option to 'true'
+* **query** (string) : Please refer to to [using custom markup](#using-custom-markup)
+* **clickQuery** (string): Please refer to [custom click query](#custom-click-query)
 
 Example usage of options:
 
@@ -195,7 +263,7 @@ Example usage of options:
 $("#demo").collapse({
   open: function() {
     // The context of 'this' is applied to
-    // the collapsed details in a jQuery wrapper 
+    // the collapsed details in a jQuery wrapper
     this.slideDown(100);
   },
   close: function() {
@@ -210,52 +278,63 @@ $("#demo").collapse({
 
 #### Binding events
 
-You can bind your own callbacks to the open and close events for a
-section.
+You can listen for the **opened** and **closed** events on a collapsed collection.
 
 ```js
-$("#demo").collapse(); // Initializing plugin
 
-$("#demo").bind("open", function(e, section) {
-  console.log(section, " is open");
+$("#demo").bind("opened", function(e, section) {
+  console.log(section, " was opened");
 });
 
-$("#demo").bind("close", function(e, section) {
-  console.log(section, " is closed");
+$("#demo").bind("closed", function(e, section) {
+  console.log(section, " was closed");
 });
 ```
 
+#### Triggering events
+
+You can manually trigger an **open**, **close** or **toggle** event to change the state of a section:
+
+```js
+$("#demo").trigger("open") // open all sections
+$("#demo").trigger("close") // close all sections
+$("#demo h2 a").last().trigger("toggle") // toggle last section
+```
+
+When a section changes state, it will trigger either an "opened" or "closed" event in return, depending on it's new state.
+
 ### API methods
 
 If you're using vanilla JavaScript to instantiate the plugin, you'll get
-access to the *open* and *close* methods.
+direct access to the **open**, **close** and **toggle** methods.
 
 ```js
-
 var demo = new jQueryCollapse($("#demo")); // Initializing plugin
 demo.open(); // Open all sections
 demo.close(); // Close all sections
 demo.open(0); // Open first section
 demo.open(1); // Open second section
 demo.close(0); // Close first section
+demo.toggle(1); // Toggle second section
 ```
 
-
 ## Contributing
 
 Did you find a bug? Do you want to introduce a feature? Here's what to do (in the following order)
 
-* Find a bug, or invent a feature.
-* Write a test case (located in ./spec/*_spec.coffee)
+* Clone this repository, and run `npm install`
+* Write a test case
 * Watch it fail (red light)
 * Fix bug / introduce feature
 * Watch it pass (green light)
 * Refactor / Perfectionize!
-* Do a pull request on Github
-* Wait patiently...
+* Submit a pull request on Github and wait patiently...
 * Rejoice!
 
-Tests are written in CoffeeScript with a BDD flavour using the [Buster.js](http://busterjs.org/) test framework.
+### A note about testing
+
+To run the tests simply type "npm test". The [Karma](http://karma-runner.github.io/) test runner will open Chrome and Firefox and run the tests.
 
-Thanks in advance
+The tests are written in a BDD fashion using CoffeeScript and can be found in the test directory.
 
+The test suite uses [Mocha](http://mochajs.org/) (test framework), [Chai](http://chaijs.com/) (exceptions) and [Sinon](http://sinonjs.org/) (stubs and mocks).

demo/demo.css

@@ -63,7 +63,6 @@ h3:hover { background: rgb(228,10,85); }
 h3.open  { background: rgb(255,70,120); }
 h3.open a { background-position: 13px -25px; }
 h3 + div { padding: 10px; }
-
 h2 + div,
 .example {
   background: #fff;
@@ -90,10 +89,10 @@ h3+div {
   display: block!important;
   -webkit-transform: translateZ(0);
   -webkit-transition: all 0.3s ease;
-	-moz-transition: all 0.3s ease;
-	-o-transition: all 0.3s ease;
-	-ms-transition:all 0.3s ease;
-	transition: all 0.3s ease;
+  moz-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  -ms-transition:all 0.3s ease;
+  transition: all 0.3s ease;
 }
 #css3-animated-example .content {
   padding: 10px;
@@ -124,6 +123,9 @@ pre#event-log {
   }
 }
 
+.test { background: #ccc; padding: 10px; border-bottom: 1px solid #aaa;}
+.test + div { background: #fff; padding: 10px; }
+
 @media
 only screen and (max-width: 704px),
 only screen and (-webkit-min-device-pixel-ratio : 1.5),