CODEWITHSUNDEEP
javascripthtmlcss
Justin
Justin

Reputation: 151

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!

Upvotes: 1

Views: 18686

Answers (4)

Mykhailo Zhuk
Mykhailo Zhuk

Reputation: 777

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.

Upvotes: 4

untitled
untitled

Reputation: 7

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>

Upvotes: -1

aksu
aksu

Reputation: 5235

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

Upvotes: 5

logan Sarav
logan Sarav

Reputation: 781

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.

Upvotes: 2

Related Questions