<!DOCTYPE html>
<html>
<head>
<title>Show/Hide Text</title>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script01.js"></script>
</head>
<body>
<a href="#" id="textToggle">show/hide text</a><br>
<div id="bodyText">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet mi. Cras urna. Curabitur diam.
Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, nisi. Duis nulla lectus, feugiat et, tincidunt
nec, iaculis vehicula, tortor. Sed tortor felis, viverra vitae, posuere et, ullamcorper a, leo. Suspendisse
euismod libero at orci. Pellentesque odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin
ultricies risus cursus mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu,
pretium posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.
</div>
</body>
</html>
$(document).ready(function() {
$("#bodyText").hide();
$("#textToggle").click(
function() {
$("#bodyText").toggle("highlight", {}, 2000);
return false;
}
);
});
The functionality here is that new text will highlight for a few seconds and then the highlight will vanish
Highlight the selected object
For 2 seconds
Use the default (yellow) color
Jquery toggle method
The jQuery ui (User Interface) module has been included