Skip to content

Instantly share code, notes, and snippets.

@raws
Created November 28, 2011 02:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save raws/1398901 to your computer and use it in GitHub Desktop.
Save raws/1398901 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<style type="text/css" media="screen">
#the-box {
padding: 1em;
background-color: lightblue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() { // Run this anonymous function when the page is almost finished loading
$("#the-link").click(function() { // Run this anonymous function whenever #the-link is clicked
$("#the-box").slideToggle(); // Opens if hidden, hides if visible
event.preventDefault(); // Stops the browser from handling the link like it normally would
});
});
</script>
</head>
<body>
<h1>JQuery Demo</h1>
<p><a id="the-link" href="#">Click me</a> to display the box!</p>
<div id="the-box" style="display:none;">
<p>HONK HONK, PIMPIN' AIN'T EASY</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment