Как переключить видимость div с помощью нажатия кнопки

Ниже приведен мой код javascript, который я использовал для отображения div при нажатии на button.

Как я могу скрыть его при повторном нажатии? А затем, щелкнув по нему, div должен быть снова видимым?

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>

Ответ 1

Если вас интересует сокет jQuery:

Это HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

Это jQuery script

$( "#button" ).click(function() {
    $( "#item" ).toggle();
});

Вы можете видеть, как он работает здесь:

http://jsfiddle.net/BQUyT/

Если вы не знаете, как использовать jQuery, вы должны использовать эту строку для загрузки библиотеки:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

И затем используйте эту строку для запуска:

<script>
$(function() {
    // code to fire once the library finishes downloading.
});
</script>

Итак, для этого случая конечный код будет следующим:

<script>
$(function() {
    $( "#button" ).click(function() {
        $( "#item" ).toggle();
    });
});
</script>

Сообщите мне, если вам нужно что-нибудь еще

Подробнее о jQuery можно прочитать здесь: http://jquery.com/

Ответ 2

Чтобы переключить стиль отображения между block и none, вы можете сделать что-то вроде этого:

function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}

рабочая демонстрация: http://jsfiddle.net/BQUyT/2/

Ответ 3

Попробуйте выполнить следующую логику:

<script type="text/javascript">
function showHideDiv(id) {
    var e = document.getElementById(id);
    if(e.style.display == null || e.style.display == "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}
</script>

Ответ 4

с помощью JQuery .toggle() вы можете легко выполнить его

$( ".target" ).toggle();

Ответ 5

jQuery будет самым простым способом, если вы хотите его использовать, но это должно работать.

<script type="text/javascript">
    function showHide(){

        var e = document.getElementById('e');

    if ( e.style.display != 'none' ) {
        e.style.display = 'none';
    }
    else {
        e.style.display = '';
    }

}
</script>

Ответ 6

Bootstrap 4 предоставляет для этого компонент Свернуть. Он использует JavaScript за кулисами, но вам не нужно самостоятельно писать JavaScript.

Эта функция работает для <button> и <a>.

Если вы используете <button>, вы должны установить атрибуты data-toggle и data-target:

<button type="button" data-toggle="collapse" data-target="#collapseExample">
  Toggle
</button>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>

Если вы используете <a>, вы должны использовать set href и data-toggle:

<a data-toggle="collapse" href="#collapseExample">
  Toggle
</a>
<div class="collapse" id="collapseExample">
  Lorem ipsum
</div>