Hide/unhide div with button?

Question

    <h1>Welcome! Chat now!</h1>

    <button id="button">Chat Now</button>
    <button id="buttontwo">Chat Categories</button>



    <div id="login" style="visibility:hidden">
    <button id="closelogin">Close</button>
    <input type="text" placeholder="Username"/>
    <p id="loginshiz">Pick a username</p>
    <button id="go">Go</button>
    </div>

When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!

Answer 1

Use jQuery. No way to do it plain html/css.

$('#button').click(function() {
    $('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
    $('#login').css('visibility', 'hidden');
});

If you don't have jQuery included, use javascript:

document.getElementById('button').onclick = function() {
    document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
    document.getElementById('login').style.visibility = 'hidden';
}

Answer 2

Look at my example without using of JavaScript.

    <input type="checkbox" id="box"/>
    <label id="container" for="box">
        <div id="button">Chat Now</div>
        <div id="login">
            <label for="box" id="closelogin">Close</label>
            <input type="text" placeholder="Username"/>
            <p id="loginshiz">Pick a username</p>
            <button id="go">Go</button>
        </div>
    </label>

and css

#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}

Fiddle http://jsfiddle.net/LUdyb/1/

Hope this help.

Answer 3

Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.

Answer 4

There is no way you can do this in html/css

You can use Jquery

$('#button').click(function() {
    $('#login').css('visibility', 'visible');
});

to close

$('#closelogin').click(function() {
    $('#login').css('visibility', 'hidden');
});

you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')

You need to include Jquery library like this in your head or bottom of your page to make it work.

eg:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>