Adding jQuery to a college page
For this lab, you will use the jQuery library to add animations and effects to the mycollege.html page. This file contains four sections with information about USC. Use actions and events we learned in class to make this page interactive.
This lab is intended to let you practice using some basic commands from the jQuery library.
STEPS:
- Save the mycollege.html file to your computer.
-
Program jQuery so that:
- When the page loads, immediately hide the "content" of each section (.content paragraphs) but leaving the titles (.title) visible.
-
Use the "on" command to bind to / detect user interactions with different titles (target them by their ID), that reveals the corresponding "content" block through animation commands. I.e. someone clicks on the "History" title and the corresponding content block fades or slides in.
-
Bind to one element on the page, from a user interaction, a command that manipulates an object through css(), attr(), or html(). For instance, maybe when someone does a mouseover on a particular elements its class changes or individual properties change.
-
Feel free to add any new HTML objects to the page, such as adding a cool USC photo that comes up upon a particular user behavior.
Note: For this lab jQuery has already been loaded into the page from a remote site.
|