Question: Please modify my the faqs.js file so my jQuery will operate properly with this toggle program . Program output is below the source code The

Please modify my the faqs.js file so my jQuery will operate properly with this toggle program.

Program output is below the source code

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);

};

$(function () {

//Add a click handler for "#faqs a" tag

var faqs = $("#faqs a").click(function () {

var h2 = $(this).parent();

var div = h2.next();

//JQuery method to hide and unhide tag

div.toggle();

//JQuery method to show + and - images by modifying the attributes

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

h2.removeAttr("class");

} else {

h2.attr("class", "minus");

}

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

div.removeAttr("class")

} else {

div.attr("class", "open");

}

});

});

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; }

Output:

Please modify my the faqs.js file so my jQuery will operate properly

FAQS ? file://home/amoeba2/Desktop/cheggandex.html# 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? +Why is jQuery becoming so popular

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!