In the HTML file, note that the link and script tags you need for jQuery UI have been coded for you. Then, rewrite the HTML so it’s consistent with the HTML that the Accordion widget needs. Here’s what the jQuery UI website says about the Accordion widget: “The underlying HTML markup is a series of headers (h3 tags) and content div so the content is usable without JavaScript.” 3. In the JavaScript file, comment out everything within the ready() event handler. Then, write the code for using the Accordion widget so all the panels can close and the panel height is based on the content height. 4. In the CSS file, comment on everything that’s no longer needed for this application. enter image description here
Index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1">
<title>FAQs</title>
<link rel="stylesheet" href="faqs.css">
<link rel="stylesheet" type="text/css" href="../jquery-ui 1.12.1.custom/jquery-ui.min.css">
</head>
<body>
<main id="faqs">
<h1>jQuery FAQs</h1>
<div id="accordion">
<h3><a href="#">What is jQuery?</a></h3>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h3><a href="#">Why use jQuery?</a></h3>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>It's cross-browser compatible.</li>
</ul>
</div>
<h3><a href="#">Which is harder to learn: jQuery or JavaScript?</a></h3>
<div>
<p>For many things, jQuery is easier to learn than JavaScript.
But remember that jQuery is JavaScript.
</p>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="../jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="faqs.js"></script>
</body>
</html>
FAQS.JS
"use strict";
/*$(document).ready( () => {
$("#faqs h2").click( evt => {
const h2 = evt.currentTarget;
$(h2).toggleClass("minus");
if ($(h2).attr("class") !== "minus") {
$(h2).next().hide();
}
else {
$(h2).next().show();
}
evt.preventDefault();
});
$("#faqs").find("a:first").focus();
});*/
$(document).ready( () => {
$("#faqs").accordion({
heightStyle: "content",
collapsible: true,
active: false
});
});
FAQS.CSS
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 550px;
margin: 0 auto;
border: 3px solid blue;
padding: 15px 25px;
}
h1 {
font - size: 150 %;
}
h3 {
font - size: 120 %;
padding: .25em 0 .25em 25px;
cursor: pointer;
background: url(css / images / plus.png) no - repeat left center;
}
.ui - accordion - header - active, h3.minus {
background: url(css / images / minus.png) no - repeat left center;
}
a {
color: black;
text - decoration: none;
}
a: focus, a:hover {
color: blue;
}
div {
display: none;
}
div.ui - accordion - content - active {
display: block;
}
ul {
padding - left: 45px;
}
li {
padding - bottom: .25em;
}
p {
padding - bottom: .25em;
padding - left: 25px;
}
/*#faqs > div {
margin: 10px auto;
}
#faqs h2 {
background-color: #efefef;
}
#faqs h2.minus {
background: url(images/minus.png) no-repeat left center;
background-color: white;
background-size: contain;
}
#faqs h2, #faqs > div div {
border: 1px solid #ededed;
border-collapse: collapse;
border-radius: 2px;
}
#faqs > div{
display: none;
}
*/