Please modify my the faqs.js file so my jQuery will operate properly with this t
ID: 3718303 • Letter: P
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 FAQ applicatiion's source code is below:
index.html source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>
</head>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2><a href="#">What is jQuery?</a></h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>
</html>
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:
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?Explanation / Answer
add this below line in the head of the HTML.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
replace your js code with the below code:
$(document).ready(function(){
$("#jqp").hide();
$("#jq2p").hide();
$("#js").click(function(){
$("#jsp").toggle();
$("#jqp").hide();
$("#jq2p").hide();
});
$("#jq").click(function(){
$("#jsp").hide();
$("#jqp").toggle();
$("#jq2p").hide();
});
$("#jq2").click(function(){
$("#jsp").hide();
$("#jqp").hide();
$("#jq2p").toggle();
});
});
**Comment for any further queries.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.