1
    <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!

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Justin
  • 111
  • 1
  • 4
  • 8

4 Answers4

5

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';
}
aksu
  • 5,221
  • 5
  • 24
  • 39
  • Yes, it gets click event from id(`#button`, `#closelogin`). It doesn't matter which type of element it is, as long as it has that id. – aksu Jan 18 '14 at 11:51
4

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.

Mykhailo Zhuk
  • 779
  • 6
  • 11
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.

logan Sarav
  • 781
  • 6
  • 27
-1

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>
untitled
  • 7
  • 1