The first tool you will add to your jQuery effects tool belt is the .hide() method. When you hide an element, your browser will render the HTML as if the hidden element does not exist. It will disappear from the page and the space that it was taking up will disappear as well. Take a look at the code below to learn how to use the .hide() method:
In the example above, the event handler gets triggered whenever an element with a class of hide-arrow is clicked. That element could be a button, some text, an image, or any other HTML element. When the event is triggered, we target all elements of the class shoe-information and call .hide() on them. Check out the gif below to see an example.
In this gif, the shoe-information element hides when the hide-arrow button is clicked. Notice that the HTML elements below the shoe-information element move up to fill the space left by the hidden element.
Instructions
In this lesson, you will create a table that shows off nine jQuery effects.
Right now, there is one button in our table. Inside the .ready() callback function, write an event handler that is triggered when a button with the class hide-button is clicked. For now, leave the callback function empty.
In the callback function, target the image that has a class first-image
Call the .hide() method on the targeted element. Test your button!