In this exercise, you’ll develop an application that displays the first paragrap

Question

In 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.

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 <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.

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 <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 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”.

CSS

JS

Explanation / Answer

CSS

JS

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.