Switching between two CSS classes via onclick

kotyy · 12-11-2009, 10:25 PM

I'm quite new to javascript and don't often understand what I'm reading, so the search results I found didn't seem to help me much. Being such, if this question has been addressed elsewhere, my apologies.

On my site, I have a navigation pane with 4 links. Two of these links show collapsable submenus. When one clicks a link, I want the CSS class of that link to change. For the two "real" links, I've just changed the class on the page itself. For the two collapsible menus, I'm trying to employ javascript.

Ultimately for these two links, I want the class to change when clicked, and change back when clicked again.

Here's the code for the page:

Code:

<div id="navigation">
	<ul>
		<li><h3><a href="javascript:;" onclick="changeclass(this);" onmousedown="toggleSlide('slidemenu');" class="colmain">COLLAPSIBLE MENU 1</a></h3></li>
			<div id="slidemenu" style="display:none; overflow:hidden; height:100px;">
			
				<li><h4><a href="#" class="sub">SUBMENU LINK 1</a></h4></li>
				<li><h4><a href="#" class="sub">SUBMENU LNK 2</a></h4></li>

			
			</div>
		<li><h3><a href="#" class="main">LINK 1</a></h3></li>
		<li><h3><a href="javascript:;" onclick="changeclass(this);" onmousedown="toggleSlide('slidemenu2');" class ="colmain">COLLAPSIBLE MENU 2</a></h3></li>
			<div id="slidemenu2" style ="display:none; overflow:hidden; height:100px;">
			
				<li><h4><a href="#" class="sub">SUBMENU LINK 1</a></h4></li> 
				<li><h4><a href="#" class="sub">SUBMENU LINK 2</a></h4></li>
			
			</div>
		<li><h3><a href="#" class="main" >LINK 2</a></h3></li>
	</ul>
</div>

Here's the javascript I'm working with, which I adopted from http://www.webdeveloper.com/forum/sh...d.php?t=167660 :

Code:

/*<![CDATA[*/
var colstatus;

function changeclass(obj)
	{
	
		if (colstatus) colstatus.className='colmain'; 
		{
		obj.className='colmainshow';
		colstatus=obj;
		}
		
		else
		{
		obj.className='colmain';
		colstatus=obj; 
		}
		
	}


/*]]>*/

I have three questions about this.

1. Seeing as I've been working with javascript for a grand total of six days so far, could you explain the best way to make my code work? What's the significance of colstatus=obj?

2. The javascript works if I leave out the else statement. It will change the class after being clicked, but, of course, doesn't change it back. However, if I click the other collapsible menu, it will change as expected, but the first will revert back to the original class. Why is this happening?

3. Seeing as the code is adopted, I have no idea what /*<![CDATA[*/ and /*]]>*/ mean. Would you explain?

Thanks in advance for your patience and answers!

vwphillips · 12-12-2009, 11:08 AM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.colmainshow {
  background-Color:red;
}

.colmain {
  background-Color:green;
}

/*]]>*/
</style><script  type="text/javascript">
/*<![CDATA[*/

var colstatus;

function changeclass(obj){
 if (colstatus&&colstatus!=obj){
  colstatus.className='colmain';
 }
 if (obj.className=='colmainshow'){
  obj.className='colmain';
 }
 else {
  obj.className='colmainshow';
 }
 colstatus=obj;
}

var lst

function toggleSlide(id){
 var obj=document.getElementById(id);
 if (lst&&lst!=obj){
  lst.style.display='none';
 }
 if (obj.style.display=='none'){
 obj.style.display='block';
 }
 else {
  obj.style.display='none';
 }
 lst=obj;
}
/*]]>*/
</script></head>

<body>
<div id="navigation">
	<ul>
		<li><h3><a href="javascript:;" onclick="changeclass(this);toggleSlide('slidemenu');" class="colmain">COLLAPSIBLE MENU 1</a></h3>
			<ul id="slidemenu" style="display:none; overflow:hidden; height:100px;">

				<li><h4><a href="#" class="sub">SUBMENU LINK 1</a></h4></li>
				<li><h4><a href="#" class="sub">SUBMENU LNK 2</a></h4></li>


			</ul>
            </li>
		<li><h3><a href="#" class="main">LINK 1</a></h3></li>
		<li><h3><a href="javascript:;" onclick="changeclass(this);toggleSlide('slidemenu2');" class ="colmain">COLLAPSIBLE MENU 2</a></h3>
			<ul id="slidemenu2" style ="display:none; overflow:hidden; height:100px;">

				<li><h4><a href="#" class="sub">SUBMENU LINK 1</a></h4></li>
				<li><h4><a href="#" class="sub">SUBMENU LINK 2</a></h4></li>

			</ul></li>
		<li><h3><a href="#" class="main" >LINK 2</a></h3></li>
	</ul>
</div>
</body>

</html>

Philip M · 12-12-2009, 01:21 PM

Quote:

Originally Posted by kotyy

3. Seeing as the code is adopted, I have no idea what /*<![CDATA[*/ and /*]]>*/ mean. Would you explain?

The term CDATA is used to indicate text data that should not be parsed by the XML parser.
Some text, like JavaScript code, contains a lot of "<" or "&" characters which are illegal in XML elements.
To avoid errors script code may be defined as CDATA.

For more info see:- http://www.w3schools.com/xmL/xml_cdata.asp