Tutorial: jQuery show/hide basics
JavaScript has been used for quite a long time to make websites come alive without having to jump from page to page. It is a client-side language, which means it loads in your browser when your page loads, but then is able to do things without refreshing the page in the user’s browser (the “client’s side”).
In the beginning, web developers always wrote out JavaScript instructions in full. Some purists still do. The problem with this is that the wheel keeps getting re-invented over and over again.
Along came JavaScript libraries. These libraries put common functions – like dynamically showing and hiding boxes – into a prepackaged file – or “library.” Many libraries have been developed: jQuery, Mootools, Prototype, and script.aculo.us. In my opinion, none have evolved as well as jQuery, which is why I use it almost exclusively.
Enough of the history lesson: let’s get to it. I’m going to walk you through the basics of showing and hiding elements – one of the most common things a web developer will do with jQuery.
Step 1: Download jQuery
Go to http://docs.jquery.com/Downloading_jQuery and download the most recent version of jQuery. It will be a single file. As of the date of this post, it will be jquery-1.6.2.min.js. The "min" just means it has already been "minified" - or stripped of all the line breaks and excess spaces so the file will look like a tight block of code with very long lines. This allows it to load more quickly in the user's browser.
After you've downloaded it, put it into a folder in your site's directory - anywhere you want as long as it is publicly visible. In a basic HTML site, for example, you can put it in a folder called "javascript" or "js" in the same directory as the index of your site. In other words, you will see the code if you point your browser's address bar to "http://www.yoursite.com/js/jquery-1.6.2.min.js."
Step 2: Link to the jQuery file
In the <HEAD> section of your HTML page (or header include), add the following line:
Change the SRC attribute to match your site's URL.
You can also add this in the bottom of your site (or footer include) near the closing of thetag. This is actually good for performance reasons as the page renders and does not have to wait for all the JavaScript to load. I tend to put the jQuery link in the HEAD so any inline functions or plug-ins that depend on jQuery will need it to be referenced first.
ALTERNATIVE TO STEPS 1 & 2
As an alternative to downloading and linking to the jQuery file, you can simply link to a publicly-hosted copy. For example, the jQuery website provides a hosted version. Simply add the following link to your header file:
Google and Microsoft also offer public copies. Since I frequently work offline, I tend not to use this option.
Step 3: Create the HTML
Insert the below code in your content section of your HTML page:
This is the hidden div with the content you want to show or hide.
There are only two elements defined: the A (anchor) link that controls the showing and hiding function, and the DIV (division) that will contain the content that is shown or hidden. I am using an ID for the elements of "trigger" and "target" to help you understand the way jQuery works, but you can use any ID or CLASS.
Step 4: Add some CSS style
To give the HTML elements some structure and color, add the following code to your HTML page:
Preferably, you should add this directly into your style sheet. For example, if you are using WordPress, it should go directly into your STYLE.CSS file. In a CSS file, do not use the <STYLE> tags.
Step 5: Add the jQuery
Add the following jQuery code to your page:
I generally put my JavaScript and jQuery in a separate file called COMMON.JS that I include with a link in my header file (also usually an include). You can put it anywhere below the link to the jQuery library.
Let's break this down, one piece at a time:
The <SCRIPT> tags are necessary to initiate and wrap the JavaScript and are necessary only because the JavaScript is written inside the HTML page. In an included page with the .JS extension, these tags are not used.
$(document).ready(function(){ ... })
The "doc ready" function must wrap the jQuery functions. It forces the functions inside to load after the document object model (DOM) is loaded but before the page contents are loaded. Without getting too into it, the DOM is the way that JavaScript sees the elements of the HTML page. You can read more about the DOM at http://www.w3.org/DOM.
$('a#trigger').click(function() { ... })
This is the basic show / hide function. The first part - shown above - defines the trigger ELEMENT and trigger EVENT. The $('a#trigger') part defines the trigger element. In this case, it is an anchor element - using the HTML <A> tag with an ID of "trigger" (a#trigger). The second part is the trigger event. In this case the event is a click (.click(function()). For a list of all events, go to http://api.jquery.com/category/events. When the element is clicked: the functions inside the brackets are run, for example:
$('div#target').toggle(); return false;
The second part of the show / hide function defines the target ELEMENT and EFFECT. In this case, the target element is defined as the DIV with the ID "target" (div#target). The target effect is a toggle. A toggle is simply an effect that reveals an element if it is hidden, or hides an element if it is being shown.
For a list of all possible effects, go to http://api.jquery.com/category/effects/ The "return false" is an important part of the effect function. It prevents the element from doing what it does normally. For example, the <A> tag with an HREF attribute would normally link to another page. With the "return false" instruction, the anchor will no longer link to another page.
DEMO #1: Simple show/hide effect
View the show/hide demo #1 in the link below.
https://www.dockstreetmedia.com/demo/jquery-showhide/demo-1/
To see the entire source code, right-click and select "View Source."
DEMO #2: Sliding show/hide effect
For a smoother sliding effect, change the target effect to "slideToggle" - as shown in the updated jQuery below:
View jQuery show/hide demo #2 in the link below:
https://www.dockstreetmedia.com/demo/jquery-showhide/demo-2/
DEMO #3: Fading show/hide effect
For a fading in-and-out effect, change the target effect to "fadeToggle" - as shown in the updated jQuery below:
View jQuery show/hide demo #3 in the link below:
https://www.dockstreetmedia.com/demo/jquery-showhide/demo-3/
Summary
I hope this tutorial has been helpful in understanding the basics to animating your web pages with JavaScript and jQuery. These show/hide basics are the foundation of very common and useful web effects, including drop-down menus, slideshows, and dynamic forms. With a lot of practice, these difficult-looking, flashy effects become elementary.
Cheers.