Important Note: To use the jQuery Methods
slideUp() you will need two separate
toggle() only requires one
Goal: In the Simple effects video, we learned:
- How to show and hide elements using
- How to toggle with
- How to style a link with CSS
- How to use
- Classes are used for elements that show up in multiple places on our web page
- IDs are used for an element that shows up only once on our web page
Now, let's begin to familiarize ourselves with jQuery by completing the exercises detailed below.
- How do we tell jQuery which part of the page to add an effect to? What does the code look like?
- What is the DOM? How do we interact with it?
- When do we use an id? What about a class?
jQuery Effects Practice
- On the walrus page, add some clickable text that alternates between saying "Hide/show images", and toggles the images appropriately.
- On either the walrus page or the webpage from the previous exercise, try fading and sliding elements with
- Make a webpage with a few different sections, where a few of the sections are hidden by default, with a bit of teaser text that expands when you click on it (e.g., "Click to learn about the giant sandcastles of this fabulous country!"). Be creative!