Skip to content

Instantly share code, notes, and snippets.

@ArondeParon
Created June 21, 2013 13:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ArondeParon/5831182 to your computer and use it in GitHub Desktop.
Save ArondeParon/5831182 to your computer and use it in GitHub Desktop.
Toggler.
/**
* Toggle everything!
*
* Options
*
* data-toggle="<selector>" The element that should be toggled.
* data-toggle-class="<classname>" [optional] The classname that should be toggled on the target. If empty, display will be toggled
* data-toggle-alt-html="<content>" [optional] Alternate content that should be displayed in the toggling element
* data-toggle-duration="<duration>" [optional] Duration of the effect. Instant if empty.
* data-save-state="<reference>" [optional] Save the state of the toggle in a a cookie. Requires $.cookie
*
* Example:
* <a href="#" data-toggle="#some-form" data-toggle-alt-html="Hide form">Show form</a>
* <form action="" id="some-form"><button type="submit">Submit it!</button></form>
*
*/
$('[data-toggle]').click(function() {
var $this = $(this);
var ref = $(this).data('toggle');
if ($(this).data('toggle-alt-html')) {
if ($(this).data('toggle-alt-html') == $(this).html()) {
$(this).html($(this).data('original-html'));
} else {
$(this).data('original-html', $(this).html());
$(this).html($(this).data('toggle-alt-html'));
}
}
var duration = $(this).data('toggle-duration') || 0;
if ($(this).data('toggle-class')) {
$(ref).toggleClass($(this).data('toggle-class'));
if ($(this).data('save-state')) {
// data-save-state should contain a reference that can be used for a cookie name
$.cookie($(this).data('save-state') + '-toggled', !$(ref).hasClass($(this).data('toggle-class')));
}
} else {
$(ref).toggle(duration, function() {
if ($this.data('save-state')) {
// data-save-state should contain a reference that can be used for a cookie name
$.cookie($this.data('save-state') + '-toggled', $(this).is(':visible'));
}
});
}
$(this).toggleClass('active');
if ($(this).is('a')) {
return false;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment