jQuery includes functions that will allow you to simply hide and show elements, although you can use these functions in conjunction with other effects.
Create a new HTML file named recipe-2.html and save it to the same folder as your jQuery library.
Understand how you can use jQuery to easily hide and show elements in the DOM by performing the following steps:
In
recipe-2.html, add the following HTML code. Ensure that the reference to the jQuery library is pointing to the correct location and filename of your downloaded version.<!DOCTYPE html> <html> <head> <title>Chapter 4 :: JQuery Effects :: Recipe 2</title> <script src="jquery.min.js"></script> <script src="recipe-2.js"></script> </head> <body> <button class="show">Show</button> <button class="hide">Hide</button> <p class="text">Hiding and showing HTML elements with jQuery is so easy...