This is the first of a series of simple tutorials showing how easy it is to get started with the amazing Javascript library that is jQuery. Today we are going to be looking at the simple show / hide tricks you can easily acheive with just a few lines jQuery.
Getting your page setup
This example will show a very simple page with a show/hide div in it. For this example we will start with a blank page that contains a DIV layer with some content, and some buttons that will allow us to show / hide the DIV and another button that will be used to toggle the show / hide method. Here is the basic page with these elements:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page Template - Show/Hide DIV layers with jQuery - DevelopStuff.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
//your jQuery code goes here!
});
</script>
</head>
<body>
<div style="width: 500px; background-color: #CCCCCC; font-size: 18px;" id="togglediv">Hello! I can be controlled with the buttons below.</div>
<button id="button-show">Show</button> <button id="button-hide">Hide</button> <button id="button-toggle">Toggle</button>
</body>
</html> |
View live Demo.
As you may notice if you have seen it before, I have put the code from my previous post about hosting jQuery on Google’s CDN in the head section. This is where we will be working next.
The jQuery
This is the brains of the whole thing now, the code below should go somewhere between the head tags in your page. This example will have three functions binded to the DIV and buttons we created in the example above. One will be to show the DIV, another will be to hide it and the other will be to toggle it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //set a variable that refers to the DIV $thediv = $('#togglediv'); //Show the DIV when user clicks the Show button. $('#button-show').click(function(){ $thediv.show(); }); //hide the DIV when the user clicks the Hide button. $('#button-hide').click(function(){ $thediv.hide(); }); //show or hide the DIV depending on the current state when the user clicks the Toggle button. $('#button-toggle').click(function(){ $thediv.toggle(); }); |
As you may notice jQuery uses CSS style selectors to refer to elements in a page, there are also other ways to refer to elements without using IDs or classes, but I will touch on this at a later date. You are not just limited to using DIV layers, everything is possible when it comes to jQuery, or near enough. It’s so flexible!
The final, working code
All of the above in one easy to use package, just Copy and Paste the code below into a new page and it will be ready for you experiment with. Feel free to do whatever you like with it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Working Demo - Show/Hide DIV layers with jQuery - DevelopStuff.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
//set a variable that refers to the DIV
$thediv = $('#togglediv');
//Show the DIV when user clicks the Show button.
$('#button-show').click(function(){
$thediv.show();
});
//hide the DIV when the user clicks the Hide button.
$('#button-hide').click(function(){
$thediv.hide();
});
//show or hide the DIV depending on the current state when the user clicks the Toggle button.
$('#button-toggle').click(function(){
$thediv.toggle();
});
});
</script>
</head>
<body>
<div style="width: 500px; background-color: #CCCCCC; font-size: 18px;" id="togglediv">Hello! I can be controlled with the buttons below.</div>
<button id="button-show">Show</button> <button id="button-hide">Hide</button> <button id="button-toggle">Toggle</button>
</body>
</html> |
View live Demo.
Wanna learn more about jQuery?
To ensure you catch all the future editions please subscribe using the form just below this post.