Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Switching between two CSS classes via onclick

    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!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by kotyy View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •