SCRIPTING THE WEB – PART 2 INTRODUCTION TO JQUERY – EXERCISE 4 – SHOWING
AND HIDING HTML ELEMENTS
Binding event handlers to elements
Traditional JavaScript uses the onClick attribute to bind an event handler function to a link. This
is the traditional way to bind event handlers to an element. However, it limits you to a single
event handler and clutters your HTML code with behavioural markup. The modern approach is
similar to CSS in that events are bound dynamically to page elements rather than embedded in
the HTML. Unfortunately, Internet Explorer uses a different event model from other browsers,
complicating the necessary code. jQuery cuts through this problem with a simple, crossbrowser solution.
Showing and hiding HTML elements
The next exercise shows how to bind click events to a series of <h2> elements to toggle open
and closed the paragraph following each heading. It introduces the concept of anonymous
functions, which are widely used in jQuery. An anonymous function is identical to an ordinary
function, apart from the fact that it doesn't have a name.
1.
You will use the previously created folder in your MySites folder called Scripting the
Web - Part 2.
2.
If necessary, define a new Dreamweaver site called Scripting the Web - Part 2 and set
the root folder as the Scripting the Web - Part 2 folder.
3.
Open the web page jq_05.html. The page contains three <h2> headings, each followed
by a single paragraph.
4.
In Code View, attach the jQuery library and create a jQuery document-ready event
handler in the same way as in the first exercise.
5.
Inside the jQuery document-ready event handler, create a jQuery selector for the
paragraphs following <h2> headings, using the adjacent sibling combinator (h2 + p) like
this:
$(function() {
$('h2 + p')
});
533545642
Page 1 of 4
Version 1
This selects the first paragraph following an <h2> heading. There are three headings on the
page, so it selects the paragraph following each heading.
6.
Apply the hide() method to the selector like this:
$(function() {
$('h2 + p').hide();
});
This hides the three paragraphs when the page loads
7.
Save the web page and view the page in a browser:
The paragraphs are hidden dynamically.
Using jQuery to hide the paragraphs, rather than setting the display property to none, means
that the text remains accessible in browsers that have JavaScript turned off.
8.
On the next line, type $('h2') to create a jQuery selector for the <h2> headings. Then
type a dot to apply a jQuery method to the selected elements. You want to add a click
event to the headings. Type cli. In Dreamweaver CS5.5, this displays the code hints for
the click() method. As shown below, there are three options:
533545642
Page 2 of 4
Version 1
9.
The first option simply inserts click() and leaves you to add whatever code you want. The
second option inserts click followed by an opening parenthesis, again leaving you to
add the rest of the code. The third option automatically inserts an anonymous function.
It's this third option that you want. Select it and press Enter/Return.
The code now looks like this:
$(function() {
$('h2 + p').hide();
$('h2').click(function(e) {
});
});
10.
Inside the anonymous function, you build the code that you want to be executed when
the event target - one of the <h2> headings - is clicked. The selector that refers to the
event target in jQuery is $(this). You need to select the paragraph that immediately
follows the heading that has been clicked. Conveniently, jQuery provides the next()
method, which takes as its argument a string containing the name of the HTML element
you want to select. And to toggle between showing and hiding an element, jQuery
provides a method called toggle().
When you put it all together, the code looks like this:
$(function() {
$('h2 + p').hide();
$('h2').click(function(e) {
$(this).next('p').toggle();
});
});
11.
Save the page and test it in a browser or Live View. When you click one of the headings,
it pops open, moving the remaining content down the page. Clicking the same heading
hides the paragraph again. Each heading and its related paragraph work independently
of the others - all thanks to just a few lines of jQuery.
533545642
Page 3 of 4
Version 1
When you click a heading, it toggles the following paragraph open or shut.
Keep your file open, because you'll now improve it in the next exercise.
The toggle() method is handy for elements that you want to toggle open and shut. As you
might expect, in addition to hide(), jQuery also has a dedicated method called show(). In effect,
all three methods change the CSS display property of the selected element(s) to block or none.
533545642
Page 4 of 4
Version 1