Hide/unhide div with button?

Question

    
Welcome! Chat now!

    Chat Now
    Chat Categories

        

Answer 1

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 2

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 3

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>

Answer 4

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';
}