Develop an application that displays the first paragraph of text for three topics and then lets the user click a link to expand or collapse additional text for each topic. see image.
A starter netbeans project: ExpandCollapse with HTML and css files has been included with this assignment. You can run the attached files: they will show the first paragraph and the links, but the links dont work.
Review the HTML to see that each topic consists of two div elements followed by an < a> element. Notice that a class named hide is assigned to the second div element of each topic. Then, review the style rule for this class.
To complete the project:
1)add a JavaScript file called subset_expansion.js and load it from the index.html file. (All code goes in this file)
2)add an event handler for the ready event method. Within the function for the ready event handler, code an event handler for the click event method of the < a> elements. This event handler should start by using the toggleClass method to add or remove the hide class from the div element above the link element thats clicked depending on whether that class is present.
3)Complete the click event handler by testing if the div element above the current link element has the hide class. If it doesnt, change the text for the link to Show less. If it does, change it back to Show more.
Next, develop an Image Gallery application that displays different images when the user clicks on the links at the top of the page. This works like the Image Swap application of figure 5-15. see image.
A starter netbeans project called ImageGallery with HTML, CSS, and image files is also attached to this assignment.
Code should be added to a JavaScript file named image_gallery.js (i.e., step 1):
1)Add the JavaScript file called image_gallery.js and load it from the index.html page
2)add an event handler for the ready event method.
3)Use the each method to run a function for each < a> element in the unordered list of items. Then, add jQuery code that gets the URL and caption for each image and preloads the image. You can get the URL from the href attribute of the < a> element, and you can get the caption from the title attribute.
4)Add an event handler for the click event of each link. The function for this event handler should accept a parameter named evt. The jQuery code for this event handler should display the image and caption for the link that was clicked. In addition, it should use the evt parameter to cancel the default action of the link.
5)Add a jQuery statement that moves the focus to the first link on the page when the page is loaded.