Extra exercises for Murachs JavaScript and jQuery (3rd Edition)

Extra 8-1 Develop an Expand/Collapse application

In this exercise, youll 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 dont 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 thats 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 doesnt, change the text for the link to Show less. If it does, change it back to Show more.