Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

A jQuery Demo - Show, Hide and Toggle.

10.3.2012

One of the reasons that jQuery is so popular is that it's so simple. Just click hide, show or toggle visibility to change the image below. Here's the only code required:

<img id="kitten" src="http://placekitten.com/300/300?image=8" />
<a href="#" id="hide">hide</a>, <a href="#" id="show">show</a> or <a href="#" id="toggle">toggle visibility</a>

  <script type="text/javascript">
  $(document).ready(function(){

	$("a#show").click(function() {
	  $("#kitten").show("slow");
	});

	$("a#hide").click(function() {
	  $("#kitten").hide("slow");
	});

	$("a#toggle").click(function() {
	  $("#kitten").toggle("slow");
	});

  });
  </script>

Need more options? Bam - jQuery has got ya covered!

Permalink

Tags: code javascript jquery web-development

Authorized users may log-in to leave a comment.

Last Blog: Awesome Keyboard Shortcuts.

Next Blog: Advice for Job Seekers.