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
instead of running two seperate functions. useing .toggle() will work alot nicer and have shorter code to read