Web Design with HTML and CSS

226

Interactivity on the web

Web Design with HTML and CSS Digital Classroom

2 Scroll to your JavaScript code and add these four lines (highlighted in red):

$(document).ready(function() {

$('#CalorieBox').hide();

$('a#triggerCalorieBox').click(function() {

$('#CalorieBox').show();

e.preventDefault()

});

});

The fi rst line identifi es the hyperlinked ID you created in step 1 and attaches it to a click

event. The second line is the instruction to show the CalorieBox ID. The third line is

needed to override the default behavior of the hyperlink. (As previously noted, before,

this hyperlink doesn’t go to another page, so this line is necessary.) The fourth line is the

closing bracket for the new function. (The opening bracket for this function is on the

.click(function() line.)

3 Save your page and then preview it in your browser. Click the Calories per serving link;

the box expands. The style for this box has been defi ned as 450 pixels wide with a black

border on all sides.

Clicking the link triggers the box to expand.

4 To enable the box to close again upon clicking, you need to add a line of code to hide

the box after it has been expanded. The eff ect you want is for the user to toggle the box

open and close by clicking the link. jQuery has a toggle eff ect you can use. You simply

need to replace the show eff ect you have with the toggle. Replace the show eff ect with

the following code (highlighted in red):

$('a#triggerCalorieBox').click(function() {

$('#CalorieBox').toggle();

e.preventDefault();