1.0.1 • Published 6 years ago
simple-expand v1.0.1
SimpleExpand.js
Simple jQuery plugin to hide/reveal content, e.g. a 'Show More' button.
Requirements: jQuery 1.3+
Features
- Lightweight (<2KB) and efficient
- Simple and easy to use
- Customisable speed and easing (supports jQuery UI)
Usage
Add a simpleExpand
class to any element to be hidden, and call simpleExpand.expand({your-element})
to expand or shrink it.
HTML:
<div id="example" class="simpleExpand">Anything here will get hidden until expanded.</div>
JS:
simpleExpand.init().expand($('#example')[0]);
- simpleExpand.init(): Initialise the plugin, Returns
simpleExpand
. - simpleExpand.expand(element, callback): Expand or shrink this non-jQuery element. Returns
simpleExpand
. .. **callback(element, expand-type*)**: Passes the (jQuery) element called, and"expand"
or"shrink"
based on the action. - simpleExpand.settings(settings): override default settings with an
object
(see below for detail). ReturnssimpleExpand
. - simpleExpand.isExpanded(element): returns true or false depending on whether that element is expanded.
Settings
These can be passed in as a object to simpleExpand.settings()
.
speed
Type: Number
(ms), Default: 400
How long it will take for a letter to be typed.
easing
Type: String
, Default: "swing"
A jQuery easing function to use for the expanding/shrinking animation.
Examples
The most basic usage, with default settings: Basic Usage (CodePen)
Changing the settings: Basic Usage (CodePen)