Using the latest version of jQuery: Re-code this file so that it works with the
ID: 3692915 • Letter: U
Question
Using the latest version of jQuery:
Re-code this file so that it works with the latest version of jQuery. Replace the toggle() compound event method with your own code because the toggle() compound event method is deprecated. You CANNOT add any ids or classes to the document. The HTML and CSS code must remain as it is. All you will add is the jQuery Code. Use the current version of the jQuery framework. Use the following classes which are located in the embedded style sheet:
.open
.close
.plus
.minus
If you use the hide() and show() effect methods, you will not need to use the .open and .close classes. You will also use the hover compound event method to change any CSS property of the h2 element when the cursor moves over and off. This will be accomplished by using the CSS() method.
Please comment EVERYTHING!
Here is the code to be modified:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment FAQs Starter File</title>
<style>
* {margin: 0;
padding: 0;
}
body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 20px;
padding: 10px;
}
section:nth-of-type(2) {padding: 15px 25px;
width: 650px;
margin-top: 20px;
margin-left: 25px;
border: 3px solid blue;
}
h1 {font-size: 150%;
}
h1 em {font-size: 0.50em;
}
h2 {font-size: 120%;
padding: .25em 0 .25em 25px;
cursor: pointer;
}
/* classes that are used by jQuery */
.plus {background: url(plus.png) no-repeat left center;
}
.minus {background: url(minus.png) no-repeat left center;
}
.close {display: none;
}
.open {display: block;
}
ul {padding-left: 45px;
}
li {padding-bottom: .25em;
}
p {padding-bottom: .25em;
padding-left: 25px;
}
#intro {margin: 20px 10px;
}
ol li:nth-of-type(3), ol li:nth-of-type(8) {
color: red;
}
#intro ul{
margin-left: 50px;
margin-top: 0px;
color: red;
list-style-type: disc;
}
</style>
<!-- we need an older version of the framework which supports the Toggle compound event -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
/*
* the divs are hidden and the plus sign is shown when the page loads
*/
// add the class - it will be replaced when the new class is toggled
// the benefit of doing this is because if the JS does not load, you will see all of the content
$('div').addClass('close');
$('h2').addClass('plus');
// YOU WILL REPLACE THE TOGGLE COMPOUND EVENT METHOD AS IT IS DEPRECATED
// YOU WILL USE WHATEVER OTHER METHODS YOU WISH
$("#faqs h2").toggle(
function() {
$(this).toggleClass('minus');
$(this).next().show();
},
function() {
$(this).toggleClass('minus');
$(this).next().hide();
}
); // end toggle
}); // end ready
</script>
</head>
<body>
<h1>Directions <em>(you may remove the directions if you wish)</em></h1>
<section id="intro">
<ol>
<li>You need to re-code this file so that it works with the latest version of jQuery</li>
<li>You need to replace the toggle() compound event method with your own code
because the toggle() compound event method is deprecated</li>
<li>You CANNOT add any ids or classes to the document. The HTML and CSS code must remain as it is</li>
<li>All you will add is the jQuery Code</li>
<li>You will use the current version of the jQuery framework</li>
<li>You will use the following classes which are located in the embedded style sheet:</li>
<ul>
<li>.open</li>
<li>.close</li>
<li>.plus</li>
<li>.minus</li>
</ul>
<li>If you use the hide() and show() effect methods, you will not need to use the .open and .close classes</li>
<li>You will also use the <strong>hover compound event method</strong> to change any CSS property (your choice)
of the <h2> element when the cursor moves over and off. This will be accomplished by using the CSS() method.
</li>
</ol>
</section>
<h1>Assignment Demonstration</h1>
<section id="faqs">
<h1>jQuery FAQs</h1>
<h2>What is jQuery?</h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop web sites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</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>
<h2>Which is harder to learn: jQuery or JavaScript?</h2>
<div>
<p>For most functions, jQuery is significantly easier to learn
and use than JavaScript. But remember that jQuery is JavaScript.
</p>
</div>
</section>
</body>
</html>
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Assignment FAQs Starter File</h2>
<p>Directions (you may remove the directions if you wish)</p>
<p>You need to re-code this file so that it works with the latest version of jQuery.</p>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.