Rewrite the FAQs application (attached) using jQuery. Consider how jQuery can help you simplify your code in

Fantastic news! We've Found the answer you've been seeking!

Question:

Rewrite the FAQs application (attached) using jQuery. Consider how jQuery can help you simplify your code in faqs.js.

Exprected output is at the bottom of the page.

This means that the source code provided below needs to be modified to use jQuery

The FAQ applicatiion's source code is below:

index.html source code:

FAQs

JavaScript FAQs

What is JavaScript?

JavaScript is a browser-based programming language

that makes web pages more responsive and saves round trips to the server.

What is jQuery?

jQuery is a library of the JavaScript functions that you're most likely

to need as you develop websites.

Why is jQuery becoming so popular?

Three reasons:

It's free.

It lets you get more done in less time.

All of its functions are cross-browser compatible.

faqs.js source code

"use strict";

var $ = function(id) { return document.getElementById(id); };

// the event handler for the click event of each a element

var toggle = function() {

var link = this; // the clicked a tag

var h2 = link.parentNode; // h2 tag that contains a tag

var div = h2.nextElementSibling; // h2 tag's sibling div tag

// toggle plus and minus image in h2 elements by adding or removing a class

if (h2.hasAttribute("class")) {

// h2.removeAttribute("class");

h2.className = "";

} else {

// h2.setAttribute("class", "minus");

h2.className = "minus";

}

// toggle div visibility by adding or removing a class

if (div.hasAttribute("class")) {

// div.removeAttribute("class");

div.className = "";

} else {

// div.setAttribute("class", "open");

div.className = "open";

}

};

window.onload = function() {

// get the a tags

var faqs = $("faqs");

var linkElements = faqs.getElementsByTagName("a");

// attach event handler for each a tag

for (var i = 0; i

linkElements[i].onclick = toggle;

}

// set focus on first tag

linkElements[0].focus();

};

main.css source code:

* { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 87.5%; width: 650px; margin: 0 auto; border: 3px solid blue; padding: 15px 25px; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; cursor: pointer; background: url(images/plus.png) no-repeat left center; } h2.minus { background: url(images/minus.png) no-repeat left center; } a { color: black; text-decoration: none; } a:focus, a:hover { color: blue; }

div { display: none; } div.open { display: block; } ul { padding-left: 45px; } li { padding-bottom: .25em; } p { padding-bottom: .25em; padding-left: 25px; }

Exprected output: