<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>075</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.12.0/jquery-ui.css">
<style type="text/css">
#extra{
width: 600px;
height: 200px;
background-color: floralwhite;
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<script type="text/javascript" src="jquery-ui-1.12.0/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.0/jquery-ui.js"></script>
<body>
<div id="extra" style="display: none">Lorem ipsum dolor sit amet, consectetur ad
ipiscing elit. Integer in erat semper, condimentum erat nec, porttitor ipsum. Ma
uris id erat luctus, finibus quam a, luctus est. Morbi id metus magna. Sed inter
dum vel arcu sed accumsan. Etiam quis ultrices elit. Maecenas efficitur in orcia efficitur. Duis id elit commodo, malesuada lorem nec, aliquet lacus. Praesent
sit amet laoreet eros, eu pulvinar libero. Sed vel dolor ac orci congue vulputat
e. Donec pulvinar risus magna, non feugiat sem aliquet eget. Nullam viverra vive
rra nunc et rutrum. Sed sed tellus a lorem porta vestibulum vel ac lacus. Suspen
disse potenti. Curabitur ac tristique lorem, sed ullamcorper odio. Mauris at acc
umsan lacus. Pellentesque at faucibus neque, nec aliquet mauris.</div>
<button id="choice">Show additional info</button>
</body>
<script type="text/javascript">
$("#choice").click(function(){
$("#extra").toggle("fold", {horizFirst:true});
});
</script>
</html>
