Inside my pop-up DIV, I would like a paraphraph to display more text when "more details" is clicked. Additionally, I'd like "More Details" change to "Hide Details." Clicking "hide details" would hide the text.
CODE **********************************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index-table</title>
<script src="http://cmc-childnet/ChildNet/Departments/LearningInstitute/documents/peac/assets/jquery-1.8.1.js"></script>
<style type="text/css">
.hidden-text-class {
width: 300px;
top: 5px;
float: right;
right: 0px;
padding-right: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<img src="assets/Focal-Review---Web-Diagram.png" alt="PEAC Cycle" name="cycle" width="1000" height="676" border="0" usemap="#goalHS" id="IDcycle" />
<map name="goal" id="goalHS">
<area shape="poly" coords="358,241,392,270,407,319,484,304,515,321,538,307,565,276,584,211,499,190,382,204" href="#" />
</map>
<div id="div-detailed-goal">
<style>
div {
display:none;
position: absolute;
height:900px;
width:1000px;
top: 200px;
left: 0px; }
</style>
<table id="Table_01" width="1000" height="837" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td valign="top" height="38">
<img id="redline" src="assets/goal_images_01.png" width="1000" height="38" alt=""></td>
</tr>
<tr>
<td valign="top">
(((((Insert Show / Hide link and paragraph here)))))
</td>
</tr>
</table>
</div>
<script>
$('#goalHS').click(function() {
$('div[id^="div-detailed-goal"]').fadeIn("slow");
});
$("#redline").click(function() {
$('div[id^="div-detailed-goal"]').fadeOut("slow");
});
</script>
<br />
<br />
<br />
</body>
</html>