CODEWITHSUNDEEP
javascriptcsshtml
Duncan Palmer
Duncan Palmer

Reputation: 73

Java script function to hide a <span>?

Hi i have the following code:

<a onclick="show_login()">Login
<span id="login" style="visibility: hidden">
<form method="post" action="login.php"> 
<label for="username">Username:</label>
<input type="text" name="username" /></a>
<label for="password">Password:</label>
<input type="password" name="password" />

<input type="submit" name="login" value="Login" />
</form>
</span>

I want to know how to hide/show that span using the function name "show_login". How would i go about doing this?

Upvotes: 1

Views: 22680

Answers (2)

mu is too short
mu is too short

Reputation: 434615

You probably shouldn't be using a <span> for that, <div> would serve you better. And visibility probably isn't what you want either, visible: hidden:

hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

And you should close your <a> before the login form.

You probably want to use display: none and display: block. So something like this:

<a onclick="toggle_login()">Login</a>
<div id="login" style="display: none">
    <form method="post" action="login.php"> 
        <label for="username">Username:</label>
        <input type="text" name="username" /></a>
        <label for="password">Password:</label>
        <input type="password" name="password" />
        <input type="submit" name="login" value="Login" />
    </form>
</div>

And:

function toggle_login() {
    var div = document.getElementById('login');
    div.style.display = div.style.display == 'none' ? 'block' : 'none';
    return false;
}

Live example: http://jsfiddle.net/ambiguous/6ngnU/1/

Upvotes: 5

DefconRhall
DefconRhall

Reputation: 293

Set the style to display: none to start with and use the jquery function show to make it appear when you want it.

http://api.jquery.com/show/

Upvotes: 0

Related Questions