jquery - onclink change text and add a class

Discussion in 'jQuery' started by kakkalo, Apr 5, 2009.

  1. #1
    hey i am kinda want to make a hide and show toggle. so that when you click on a span name open_login it will chane its inner text to "close login" and add a class named "close_login". then the close login will do the same.

    here is my code so far. the first part works but the second part doesn't.

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    
    
    <script type="text/javascript">
    
    			
    			$(function(){
    				$(".open_login").click(
    					function(){
    					$("#panel").slideDown("slow");
    					$(".open_login").text("Close Login");
    					$('.open_login').addClass('close_login');
    					$('.open_login').removeClass('open_login');
    					
    
    	              });
    				  	
    			});
    			
    			
    			$(function(){
    				$(".close_login").click(
    					function(){
    					$("#panel").slideUp("slow");
    					$(".close_login").text("Open Login");
    					$('.close_login').addClass('open_login');
    					$('.oclose_login').removeClass('close_login');
    
    	              });
    			});
    			
    			
    		</script>
    <style>
    #panel {
    height:100px;
    width:500px;
    margin:0 auto;
    background:#FE9A2E;
    display:none;
    }
    #loginbutton {
    margin:10 auto;
    background:#FA5858;
    width:100px;
    }
    </style>
    
    <div id="panel">
    
    <form name="loginform" id="loginform" action="" method="post">
    							
    								<label>Username<br />
    								<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
    							
    							
    								<label>Password<br />
    								<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
    
    							
    							<label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label>
    							
    								<input type="submit" name="wp-submit" id="wp-submit" value="Log In" tabindex="100" />
    								<input type="hidden" name="redirect_to" value="" />
    								<input type="hidden" name="testcookie" value="1" />
    							
    						    </form>
    
    </div>
    <div id="loginbutton">
    <span class="open_login">open login</span>
    </div>
    HTML:
    i am really new to this. so please help me. below is the link to this.

    http://opblolg.110mb.com/domtest.html
     
    kakkalo, Apr 5, 2009 IP
  2. parthiphp

    parthiphp Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Use this code Its will working perfect
     
    parthiphp, Apr 6, 2009 IP
  3. kakkalo

    kakkalo Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks parthiphp. thats works like charm
     
    kakkalo, Apr 6, 2009 IP
  4. HolySavior

    HolySavior Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    instead of running two seperate functions.

    useing .toggle() will work alot nicer and have shorter code to read
     
    HolySavior, Apr 7, 2009 IP