Скрыть / показать div с помощью кнопки?

Question

Скрыть / показать div с помощью кнопки?

0

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

Когда нажата кнопка чата, я хочу, чтобы появился div "login", и когда нажата кнопка "closelogin" внутри div, я хочу снова скрыть весь div. В настоящее время, если кнопки не нажаты, div должен находиться в скрытом состоянии, приветствия!

Justin 18 янв. 2014, в 13:21

Источник

0

использовать JavaScript
The Dictator 18 янв. 2014, в 11:36
0

Что вы уже пробовали?
Hashem Qolami 18 янв. 2014, в 11:36

Теги:

javascript

html

css

4 ответа

Ещё вопросы

Michael Zhuk · Answer 1 · 2014-01-18T10-13-00.000Z

Посмотрите на мой пример без использования 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>

и css

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

Скрипт http://jsfiddle.net/LUdyb/1/

Надеюсь, это поможет.

aksu · Answer 2 · 2014-01-18T09-04-00.000Z

Используйте jQuery. Нет способа сделать это просто html/css.

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

Если у вас нет jQuery, используйте javascript:

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

это будет работать, если это кнопка, а не ввод?
Да, он получает событие клика от id ( #button , #closelogin ). Неважно, какой это тип элемента, если он имеет этот идентификатор.

logan Sarav · Answer 3 · 2014-01-18T09-46-00.000Z

Используя javascript с помощью идентификатора кнопки, вы можете сделать div скрытым, изменив свойство css на видимое. при использовании jquery вы можете использовать toggle, hide, show.

untitled · Answer 4 · 2014-01-18T08-47-00.000Z

Вы не можете сделать это в html/css

Вы можете использовать JQuery

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

закрывать

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

вам просто нужно изменить идентификатор, который является #closelogin и .css('visibility', 'hidden')

Вам нужно включить библиотеку JQuery, как это, в вашей голове или нижней части страницы, чтобы она работала.

например:

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