I need help with this, please. Thanks Develop an Expand/Collapse application using JQUERY 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. 2. Review the HTML. Note that each topic consists of two div elements followed by an element. Also, note 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 ready() event method, code an event handler for the click() event method of the elements. This event handler should start by preventing the default action of the link and storing the clicked link in a constant. Then, it should use 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”. HTML             Expand/Collapse                 Murach's HTML5 and CSS3 (4th Edition)         Book description                     Murach's HTML5 and CSS3 provides all HTML and CSS a professional needs, and it             adds coverage of Flexible Box and Grid Layout, two new CSS3 ways to implement page             layouts. So whether you're a web designer, a JavaScript programmer, a server-side             programmer, or a rookie, this book delivers all the HTML and CSS skills that you             need on the job. It begins with an 8-chapter hands-on course that teaches you HTML             .                             After that, you'll learn how to use Flexible Box and Grid Layout, and how to work             with forms and data validation. Then you'll learn how to enhance a site with video             clips, CSS3 transitions, transforms, and animations. You'll learn how to design and             deploy a website, as well as other professional skills like how to use JavaScript and             jQuery and how to use development tools like Bootstrap, SASS, and Emmet. And after             you've learned all the skills that you need, this book becomes the best on-the-job             reference you've ever used.                 Show more                   About the authors                     Anne Boehm has over 30 years of experience as an enterprise programmer. She got             started with Visual Basic in the days of VB5 and has been programming on .NET since             its inception. She added C# to her programming repertoire in the mid-2000s, and she's             authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.                             Zak Ruvalcaba has been researching, designing, and developing for the web since             1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB             and C#, and he's created web applications for companies like HP, Toshiba, IBM,             Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our             books on HTML5/CSS3, jQuery, and Dreamweaver CC.                 Show more                     Who this book is for                     Due to our unique presentation methods and this book's modular organization,             this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That             includes:                             budding web developers                 web developers who haven't yet upgraded their websites to HTML5 and CSS3                 web developers who need to expand and enhance their skillsets                                         As we see it, mastering HTML5 and CSS3 will make any web developer at any level more             effective.                 Show more                                 * {     margin: 0;     padding: 0; } body {     font-family: Verdana, Arial, Helvetica, sans-serif;     font-size: 87.5%;     width: 650px;     margin: 0 auto;     padding: 15px 25px;     border: 3px solid blue; } h1 {     font-size: 150%; } h2 {     font-size: 120%;     padding: .25em 0 .25em 25px; } div.hide {     display: none;

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question
100%

I need help with this, please. Thanks

Develop an Expand/Collapse application using JQUERY
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.

2. Review the HTML. Note that each topic consists of two div elements followed by an
<a> element. Also, note 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 ready() event method, code an event handler for the click() event method of
the <a> elements. This event handler should start by preventing the default action of the
link and storing the clicked link in a constant. Then, it should use 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”.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Expand/Collapse</title>
    <linkrel="stylesheet"href="subset_expansion.css">
</head>

<body>
    <main id="jdom">
        <h1>Murach's HTML5 and CSS3 (4th Edition)</h1>
        <h2>Book description</h2>
        <div>
            <p>Murach's HTML5 and CSS3 provides all HTML and CSS a professional needs, and it
            adds coverage of Flexible Box and Grid Layout, two new CSS3 ways to implement page
            layouts. So whether you're a web designer, a JavaScript programmer, a server-side
            programmer, or a rookie, this book delivers all the HTML and CSS skills that you
            need on the job. It begins with an 8-chapter hands-on course that teaches you HTML
            .</p>
        </div>
        <div class="hide">
            <p>After that, you'll learn how to use Flexible Box and Grid Layout, and how to work
            with forms and data validation. Then you'll learn how to enhance a site with video
            clips, CSS3 transitions, transforms, and animations. You'll learn how to design and
            deploy a website, as well as other professional skills like how to use JavaScript and
            jQuery and how to use development tools like Bootstrap, SASS, and Emmet. And after
            you've learned all the skills that you need, this book becomes the best on-the-job
            reference you've ever used.</p>
        </div>
        <a href="#">Show more</a>  
       
        <h2>About the authors</h2>
        <div>
            <p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got
            started with Visual Basic in the days of VB5 and has been programming on .NET since
            its inception. She added C# to her programming repertoire in the mid-2000s, and she's
            authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
        </div>
        <div class="hide">
            <p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since
            1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB
            and C#, and he's created web applications for companies like HP, Toshiba, IBM,
            Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our
            books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
        </div>
        <a href="#">Show more</a>
           
        <h2>Who this book is for</h2>
        <div>
            <p>Due to our unique presentation methods and this book's modular organization,
            this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That
            includes:</p>
            <ul>
                <li>budding web developers</li>
                <li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
                <li>web developers who need to expand and enhance their skillsets</li>
            </ul>
        </div>
        <div class="hide">
            <p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more
            effective.</p>
        </div>
        <a href="#">Show more</a>              
   
    </main>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="subset_expansion.js"></script>  
</body>
</html>
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    width: 650px;
    margin: 0 auto;
    padding: 15px 25px;
    border: 3px solid blue;
}
h1 {
    font-size: 150%;
}
h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
}
div.hide {
    display: none;
}
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps with 2 images

Blurred answer
Similar questions
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY