In this exercise use Jquery, you’ll develop an application that displays the fir
ID: 3918138 • Letter: I
Question
In this exercise use Jquery, you’ll develop an application that displays the first paragraph of
text for three topics and then lets the user click a link to expand or collapse the
text for each topic.
Then, run the application to see that the first paragraph of text is displayed
for each topic, along with a link that lets you display additional text. Note,
however, that the links don’t work.
2. Review the HTML to see that each topic consists of two div elements followed
by an <a> element. Notice that a class named “hide” is assigned to the second div
element of each topic. Then, review the style rule for this class.
3. In the JavaScript file, add an event handler for the ready() event method.
4. Within the function for the ready event handler, code an event handler for the
click() event method of the <a> elements. This event handler should start by
using the toggleClass() method to add or remove the “hide” class from the div
element above the link element that’s clicked depending on whether that class is
present.
5. Complete the click event handler by testing if the div element above the current
link element has the “hide” class. If it doesn’t, change the text for the link to
“Show less”. If it does, change it back to “Show more”.
CSS
JS
Explanation / Answer
The html has a <p> and when you take the substr you end up with malformed html with no closing tag (ex. <p>Some Text). Different browsers will handle the malformed html differently.
Ple
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="<strong>subset_expansion.js</strong>"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div class="comment more">
With this book, you can teach yourself how to design web pages the way the
professionals do, by using HTML and CSS in tandem to structure and format the
page content. It begins with a crash course that teaches you more about HTML
and CSS than you can learn from most full books. That includes a chapter on
Responsive Web Design that shows you how to build responsive websites that will
look and work right on all devices, from phones to tablets to desktop computers.
</div>
<div class="comment more">
After that, this book shows you how to enhance your web pages with features
like images, forms with built-in data validation, and audio and video clips.
You'll also learn how to use JavaScript and jQuery to add features like image
rollovers, image swaps, and slide shows. You'll learn how to use jQuery UI and
jQuery plugins to add features like accordions, tabs, carousels, and slide shows.
And you'll learn how to use jQuery Mobile to develop separate websites for mobile
devices.
</div>
<h2>About the authors</h2>
<div class="comment more">
<strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got
started with Visual Basic in the days of VB5 and has been programming on .NET since
its inception. She added C# to her programming repertoire in the mid-2000s, and she's
authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.
</div>
<div class="comment more">
<strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since
1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB
and C#, and he's created web applications for companies like HP, Toshiba, IBM,
Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our
books on HTML5/CSS3, jQuery, and Dreamweaver CC.
</div>
<div class="comment more">
<h2>Who this book is for</h2>
<div>
Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That
includes:
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="comment more">
As we see it, mastering HTML5 and CSS3 will make any web developer at any level more
effective.
</div>
</main>
</body>
</html>
CSS:-
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
a, a:focus, a:hover {
color: blue;
}
a {
color: #0254EB
}
a:visited {
color: #0254EB
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
Javascript :-
$(document).ready(function() {
var showChar = 50;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreelipses">'+ellipsestext+'</span> <span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">'+moretext+'</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.