jQuery Hide / Show 
Inserts an accessible buttons/links to hide and show sections of content.
Usage
To get started you can either:
- Clone the repo:
git clone https://github.com/nomensa/jquery.hide-show.git - Or install with Bower:
bower install jquery.hide-show
Then it's just a case of including the following scripts on your page, best at the bottom:
Options & Defaults
buttonClass
Type: string
Default: 'js-hide-show_btn'
Description: The class which is added to the button for styling purposes
buttonCollapsedClass
Type: string
Default: 'js-hide-show_btn--collapsed'
Description: The class name applied to the button when the element is collapsed
buttonExpandedClass
Type: string
Default: 'js-hide-show_btn--expanded'
Description: The class name applied to the button when the element is expanded
callbackAfterClose
Type: function
Description: Callback at the end of the 'close' public method
callbackAfterOpen
Type: function
Description: Callback at the end of the 'open' public method
callbackBeforeClose
Type: function
Description: Callback at the start of the 'close' public method
callbackBeforeOpen
Type: function
Description: Callback at the start of the 'open' public method
callbackCreate
Type: function
Description: Callback when the plugin is created
callbackDestroy
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
Default: 'js-hide-show_content'
Description: The class for the element to be hidden/shown
containerCollapsedClass
Type: string
Default: 'js-hide-show_content--collapsed'
Description: The class which is added to the content when it is collapsed
containerExpandedClass
Type: string
Default: 'js-hide-show_content--visible'
Descritpion: The class which is added to the content when it is expanded
hideText
Type: string
Default: 'Hide Content'
Description: The text for the button that hides the content
insertMethod
Type: string
Default: 'before'
Description: Method that is used to insert the trigger button into the location, options are 'after', 'append', 'before' and 'prepend'. Only to be used with the insertTriggerLocation option.
insertTriggerLocation
Type:string
Description: Defines if the generated trigger element should be inserted to somewhere other than directly before the element
showText
Type: string
Default: 'Show Content'
Description: The text for the button that shows the content
speed
Type: string or number
Default: 'slow'
Description: Takes the same value as the duration option for jQuery's slideUp and slideDown functions
state
Type: string
Default: 'shown'
Description: Sets whether the element is hidden or shown by default, options are 'hidden' and 'shown'
triggerElementTarget
Type: string
Description: Defines if an existing element should act as the trigger element
Development
This plugin requires:
Node
First time setup of this plugin will require the node packages to be installed. On Windows use the command prompt with Ruby or on a Mac use terminal, install the global node.js packages:
$npm installGrunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to install and use Grunt.
You will need to install the Grunt CLI (command line interface):
$ npm install -g grunt-cli# => if you have used grunt before you probably have this (this can be run from any directory) Next install the plugin's node packages:
$ npm installWatcher
Running grunt (with watcher) will watch for any changes and recompile - best used during development:
$ gruntConnect server (optional)
You can run a connect web server on http://0.0.0.0:9001, if required, when running grunt:
$ grunt --connect# => Running "connect:server" (connect) task # => Started connect web server on http://0.0.0.0:9001 # => Running "watch" task # => Waiting... Copyright © 2014 @nomensa
Licensed under MIT