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?

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=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?

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=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>

Thread: Javascript expand/collapse switch menu issue

Thread Tools

Search Thread

Javascript expand/collapse switch menu issue

Expand collapse Help Please

Bookmarks

Bookmarks

Posting Permissions