Log in

View Full Version : Javascript expand/collapse switch menu issue


Afiyf
05-31-2008, 09:52 PM
I'm having problems with a script that should present a link. When clicked, a paragraph of text is expanded. When clicked again it collapses.

This script is backward, it presents the paragraph and link. How do I hide the paragraph?



<!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=iso-8859-1" />
<title>4. Switch menu</title>


<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {

el.style.display = 'none';

}else {

el.style.display = '';
}
}
//-->
</script>
</head>

<body>
<div id="par">
<p><a style="color:blue; cursor:pointer;" onclick="switchMenu('outpar');" title="Switch the Menu">4. Prepare the necessary code for the following scenario</a></p>

<div id="outpar">
<p>a. Create a link that displays a paragraph of text when clicked.&nbsp; <br />
When the link is clicked again the paragraph should disappear the paragraph should disappear <br />
the paragraph should disappear the paragraph should disappear the paragraph should disappear <br />
the paragraph should disappear the paragraph should disappear the paragraph should disappear<br />
the paragraph should disappear the paragraph should disappear.&nbsp; </p>
</div>
</div>

</body>
</html>


What did i do wrong here?
Afiyf
Afiyf
06-01-2008, 12:01 AM
I have the code that will begin with collapsed text, however I do not understand some of the functions. can someone please add comments so I can learn what the scrfipt is doing?



<!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=iso-8859-1" />
<title>4. Switch menu</title>


<script language="javascript">
var linx = false;

if(document.all) { linx = true; }
function getObject(id) {
if (linx) {

return document.all[id];
} else {
return document.getElementById(id);
}
}
//This function sets the linked HTML text that will expand paragraph
function toggle(link, divId) {

var linxText = link.innerHTML;
var d = getObject(divId);

if (linxText == 'Create a link') { link.innerHTML = 'A link to close Paragraph'; d.style.display = 'block';
}else {
link.innerHTML = 'Create a link'; d.style.display = 'none';
}
}
</script>
<!-- -->


</head>
<body>


<!-- Paragraph Expand/Collapse Content start -->

4. <a title="show/hide" id="par_link" href="javascript: void(0);" onclick="toggle(this, 'par');" style="text-decoration: none; color:blue; cursor:pointer; ">−</a>
<div id="par" style="padding: 3px;"><p>a. that displays a paragraph of text when clicked. <br />
When the link is clicked again the paragraph should disappear the paragraph should disappear <br />
the paragraph should disappear the paragraph should disappear the paragraph should disappear <br />
the paragraph should disappear the paragraph should disappear the paragraph should disappear<br />
the paragraph should disappear the paragraph should disappear. </p></div>
</div>
<script language="javascript">toggle(getObject('par_link'), 'par');</script>

</body>
</html>