Question

Extra exercises for Murach’s JavaScript and jQuery (3rd Edition)Extra 8-1 Develop an Expand/Collapse applicationIn this exercise, you’ll 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 the text for each topic.1. Open the HTML, CSS, and JavaScript files in this folder: exercises_extra\ch08\expand_collapse\Then, run the application to see that the first paragraph of text is displayed for each topic, along with a link that lets you display additional text. Note, however, that the links don’t work.2. Review the HTML to see that each topic consists of two div elements followed by an 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.3. In the JavaScript file, add an event handler for the ready() event method.4. Within the function for the ready event handler, code an event handler for the click() event method of the 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 that’s clicked depending on whether that class is present.5. Complete the click event handler by testing if the div element above the current link element has the "hide" class. If it doesn’t, change the text for the link to "Show less". If it does, change it back to "Show more".

Answer 1

In order to develop an Expand/Collapse application for the Murach's JavaScript and jQuery review the HTML code to identify each topic consisting of two div elements and an anchor element.

The second div element of each topic is assigned a class called "hide", which has a corresponding style rule.To add functionality to the link, create an event handler for the ready() method within the JavaScript file. Inside this function, create an event handler for the click() method of the anchor elements. Begin the event handler by using the toggleClass() method to add or remove the class from the div element located above the clicked link element, depending on whether the class is present.

Complete the click event handler by testing if the div element above the current link element has the "hide" class. If it doesn’t, change the text for the link to "Show less".