Hide/unhide div with button?

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

Answers:

Answer

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

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

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

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.