§ jQuery Togglr Plugin
Usage is very simple. The Togglr attaches to an anchor element and uses its href attribute as a pointer to a div that it will toggle. For example this is all you need to get started:
In this example the links will be appended with “Show” or “Hide” depending upon their toggled status. The 2nd div,
#my-div-too, will start in a closed state.
More Advanced Example
In this example we’ll set custom text to signify the open/close action and provide a callback function.
The link will read “Expand My Div” or “Contract My Div” depending upon the toggle state. Upon completion of the animation the callback function will be called and ‘this’ within the function will be the target div.
- type: slide/show, defaults to slide
Slide and show are the built in jQuery slide and show effects.
- speed: slow/normal/fast, defaults to normal
These are the built in jQuery effects speeds.
- callback: function to be passed to the toggle function as a callback
- showtext: “show” text, prepended to link HTML when target is closed
- hidetext: “hide” text, prepended to link HTML when target is open
- openclass: class to identify targets with when they are open
- closedclass: class to identify targets with when they are closed
Get it here
Check out the Togglr Plugin in action.
The source can be grabbed from the jQuery Togglr GitHub Project Page.
Donations buy donuts. Donuts help keep us motivated. When we’re motivated we make plugins. Please help keep us motivated to make more useful contributions to the coding community.