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;
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...
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
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution!
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 2 images
Recommended textbooks for you
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 Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
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 Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
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
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY