Skip to content

Instantly share code, notes, and snippets.

@jnunemaker

jnunemaker/jquery_toggle.html

Created November 18, 2008 19:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jnunemaker/26239 to your computer and use it in GitHub Desktop.
Save jnunemaker/26239 to your computer and use it in GitHub Desktop.
Download ZIP
most basic jquery plugin example that makes a link toggle another element
Raw
jquery_toggle.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Toggler</title>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
(function($) {
$.fn.toggler = function(options) {
var opts = $.extend({}, $.fn.toggler.defaults, options);
return this.each(function() {
this.togglee = $($(this).attr('href')).hide();
$(this).click(onClick);
});
function onClick() {
this.togglee[opts.animate ? 'slideToggle' : 'toggle']();
return false;
}
}
$.fn.toggler.defaults = {animate: false}
})(jQuery);
jQuery(document).ready(function() {
jQuery('a.toggler').toggler();
jQuery('a.toggler_animate').toggler({animate:true});
});
</script>
</head>
<body>
<p><a href="#foo" class="toggler">Toggler</a></p>
<p><a href="#foo2" class="toggler_animate">Toggler 2</a></p>
<div id="foo">
<p>Div to be toggled</p>
</div>
<div id="foo2">
<p>Div to be toggled 2</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment