Merge branch 'master' of https://github.com/Ferie/cssCollapse

Author: Ferie

.editorconfig

@@ -0,0 +1,26 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines
+# 4 space indentation
+# Tab indentation
+# New line at the end of the file
+[*]
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+
+# Set default charset
+[*.{js,py,css,scss,html}]
+charset = utf-8
+
+# Matches the exact file `index.html`
+[index.html]
+insert_final_newline = false
+
+# Matches the style files
+[*.{css,scss}]
+insert_final_newline = false

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+yarn.lock

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "6.17.1"
+
+script: gulp

README.md

@@ -1,86 +1,95 @@
-# cssCollapse a simple jQuery plugin that collapses elements of content using CSS3 transitions
+# cssCollapse is a jQuery plugin that collapses elements using CSS3 transitions
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/68db4347-bc46-4c24-813f-6e33d3888f6a/deploy-status)](https://app.netlify.com/sites/css-collapse/deploys)
+[![Build Status](https://travis-ci.org/Ferie/cssCollapse.svg?branch=master)](https://travis-ci.org/Ferie/cssCollapse)
+[![github tag](https://img.shields.io/github/tag/Ferie/cssCollapse.svg)](https://github.com/Ferie/cssCollapse/tags)
+
+Are you still using jQuery? Would you like a nice CSS transition managed with jQuery? If the answer is "Yes" this is the right place for you.
 
 This plugin was developed to slide the content of a hidden box using the CSS3 transitions rules.
 
 
+## Examples
+
+See the [cssCollapse jQuery plugin](https://jquery-css-collapse.netlify.com/) in action!
+
+
 ## Options and parameters
 
 It works with the following parameters that can be overwritten if needed.
 
-* ```accordion```: this variable set if the collapse has to behave like an accordion or not (the default is 'no', this means that if you want the accordion behavior, you have to call the plugin with the variable inside it set to 'yes')
-* ```accordionContainer```: this variable is the class that tells the plugin the container class for the accordion (the default is 'accordionContainer')
-* ```prefix```: this is the prefix that you can use for all the classes of this plugin to distinguish the instances or the libraries or other plugins that you are using that in some cases can use the same class names (the default is 'cssCollapse-')
-* ```targetClass```: this is the target class where the click perform the action. The target can be a link or a button or a box (the default is 'target')
-* ```targetSelected```: this is the class that is put to the open accordion target (the default is 'selected')
-* ```hiddenContentClass```: this is the class that contain the hidden content that has to be shown when the target class has been clicked (the default is 'hiddenContent')
-* ```collapseClass```: this is the class that is put to show the hidden stuff. NOTE: if you change this class you have to modify also the CSS (the default is 'is-open')
-* ```iconClass```: this is the general class that you have to add if you are using icon-fonts to indicate the opening and closing of the box (the default is 'collapseIcons')
-* ```iconOpen```: this is the class for the icon-font when the hidden content is shown (the default is 'icon-add')
-* ```iconClose```: this is the class for the icon-font when the hidden content is hidden (the default is 'icon-minus-fill')
-* ```behavior```: this is the CSS3 transitions name that you want to use (the default is empty to let the css rules works itself)
-* ```speed```: this is the transitions speed that you want to use (the default is empty to let the css rules works itself)
-* ```delay```: this is the CSS3 transitions delay that you want to use (the default is empty to let the css rules works itself)
-* ```accordionCloseLinkClass```: this is the the class for the closing link inside the accordion, if needed (the default is 'closeAccordion')
-* ```noScrollClass```: this is the the class that you have to use in your HTML near the target class, if you don't want to scroll the page when the target is clicked (the default class name is 'noScroll')
+* `accordion`: this variable set if the collapse has to behave like an accordion or not (the default is 'false', this means that if you want the accordion behavior, you have to call the plugin with the variable inside it set to 'true')
+* `accordionContainer`: this variable is the class that tells the plugin the container class for the accordion (the default is 'accordionContainer')
+* `prefix`: this is the prefix that you can use for all the classes of this plugin to distinguish the instances or the libraries or other plugins that you are using that in some cases can use the same class names (the default is 'cssCollapse-')
+* `targetClass`: this is the target class where the click perform the action. The target can be a link or a button or a box (the default is 'target')
+* `targetSelected`: this is the class that is put to the open accordion target (the default is 'selected')
+* `hiddenContentClass`: this is the class that contain the hidden content that has to be shown when the target class has been clicked (the default is 'hiddenContent')
+* `collapseClass`: this is the class that is put to show the hidden stuff. NOTE: if you change this class you have to modify also the CSS (the default is 'is-open')
+* `iconClass`: this is the general class that you have to add if you are using icon-fonts to indicate the opening and closing of the box (the default is 'collapseIcons')
+* `iconOpen`: this is the class for the icon-font when the hidden content is shown (the default is 'diff-added')
+* `iconClose`: this is the class for the icon-font when the hidden content is hidden (the default is 'diff-removed')
+* `behavior`: this is the CSS3 transitions name that you want to use examples are `ease`, `linear`, etc (the default is `false` to let the css rules works itself)
+* `duration`: this is the transitions speed that you want to use (the default is `false` to let the css rules works itself)
+* `delay`: this is the CSS3 transitions delay that you want to use (the default is `false` to let the css rules works itself)
+* `accordionCloseLinkClass`: this is the the class for the closing link inside the accordion, if needed (the default is 'closeAccordion')
+* `noScrollClass`: this is the the class that you have to use in your HTML near the target class, if you don't want to scroll the page when the target is clicked (the default class name is 'noScroll')
 
 ## Usage
 
-Apply the plugin to a single selector that have to contain the target and the hidden content to make it work independently one to the other in the same page.
+Get a copy of the plugin from the `dist` folder and add it to your project.
+
+Apply the plugin to a DOM element that have to contain the target (the element that if it is clicked, collapse another element) and the hidden content (the element that is shown/hidden when the target is clicked) to make it work independently one to the other in the same page.
 
 It can be applied also to the entire document if the same behavior is required for all the components inside the page.
 
-Use the plugin as shown in the examples below and in the ```example.html``` file.
+Use the plugin as shown in the examples below and/or in the [`example.js`](https://github.com/Ferie/cssCollapse/blob/master/src/js/examples.js) file.
 
-```
-$(document).cssCollapse({
-    accordion: 'yes',
+```javascript
+$('.box').cssCollapse({
+    accordion: true,
     targetClass: 'accordion-target',
     hiddenContentClass: 'accordion-hiddenContent',
-    iconClose: 'icon-arrow2-down',
-    iconOpen: 'icon-arrow2-up'
+    iconClose: 'chevron-down',
+    iconOpen: 'chevron-up'
 });
 ```
 
-Remember to structure the CSS as shown below. It is a plugin that is using the CSS3 transitions, so some rules are needed.
+In the page you can use the following classes: 
+- `.hiddenContent` (if you want your content to be hidden when the page loads)
 
-In particular the classes that have to be present in the CSS are ```.hiddenContent```  and ```.hiddenContent.is-open```
+and/or
+- `.hiddenContent.is-open` (if you want your content to be shown when the page loads).
 
-```
+
+### Styles
+
+Use the CSS provided in the `dist` folder or structure it as shown below.
+
+In the following example the CSS3 transitions will be then overwritten from the ones in the plugin, if specified.
+
+```css
 .hiddenContent {
     overflow-y: hidden;
     padding: 0 20px;
     max-height: 0px;
     -webkit-transition: ease-in-out 600ms max-height;
     -moz-transition: ease-in-out 600ms max-height;
-    -ms-transition: ease-in-out 600ms max-height;
     -o-transition: ease-in-out 600ms max-height;
     transition: ease-in-out 600ms max-height;
 }
 
 .hiddenContent.is-open {
     -webkit-transition: ease-in-out 600ms max-height;
     -moz-transition: ease-in-out 600ms max-height;
-    -ms-transition: ease-in-out 600ms max-height;
     -o-transition: ease-in-out 600ms max-height;
     transition: ease-in-out 600ms max-height;
 }
 ```
 
-The transition attributes can be omitted in the CSS and put in the plugin call as shown before. Remember that if they are present in both places the JS ones are the one that will be played.
-
-
-
-## Examples
-
-See the [cssCollapse jQuery plugin](http://riccardoandreatta.com/web-app/cssCollapse/example.html) in actions!!!
-
-
-
 ---
 
-#### IMPORTANT NOTES
-
-This plugin, obviously, does not show the transition animations for the hidden boxes on older browsers like Internet Explorer 7/8/9 because they do not support the CSS 3 transitions rules.
-The behavior on these browsers will be a simple hide/show of the hidden content.
+#### Known issue
 
+This plugin, obviously, does not show the transitions on older browsers like Internet Explorer 9 and below, because they do not support CSS3 transitions.
 
+The behavior on these browsers will be a simple hide/show of the hidden content.

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-minimal