Показать и скрыть DIV при нажатии кнопки с помощью JavaScript

JavaScript — это универсальный и широко используемый язык программирования, который можно использовать для различных задач веб-разработки, включая отображение и скрытие элементов на веб-странице. В этой статье мы рассмотрим, как отображать и скрывать DIV при нажатии кнопки с помощью JavaScript.

Начало работы

Для начала мы сначала создадим базовую структуру HTML с двумя DIV и кнопкой. Первый DIV будет содержать некоторый контент, а второй DIV по умолчанию будет скрыт.

<button id="toggleBtn">Show/Hide DIV</button>
<div id="firstDiv">This is the first DIV.</div>      
<div id="secondDiv" style="display:none;">This is the second DIV.</div>

Стиль display:none для второго DIV гарантирует, что он будет скрыт при загрузке страницы. Кнопка будет использоваться для переключения видимости второго DIV.

Показывать и скрывать DIV при нажатии кнопки

Далее мы добавим функцию JavaScript, которая будет выполняться при нажатии кнопки. Эта функция переключает видимость второго DIV, изменяя стиль его отображения.

<script>
    document.getElementById("toggleBtn").onclick = function() {
        var secondDiv = document.getElementById("secondDiv");
        if (secondDiv.style.display === "none") {
            secondDiv.style.display = "block";
        } else {
            secondDiv.style.display = "none";
        }
    };
</script>

Код JavaScript сначала получает ссылку на элемент кнопки с помощью метода «getElementById». Затем он добавляет к кнопке обработчик события click, который будет выполнять функцию. Внутри функции мы получаем ссылку на второй элемент DIV и используем оператор if-else для переключения его стиля отображения между «блок» и «нет».

Заключение

В этой статье мы рассмотрели, как отображать и скрывать DIV при нажатии кнопки с помощью JavaScript. Мы увидели, как создать базовую структуру HTML с двумя DIV и кнопкой и как использовать JavaScript для переключения видимости второго DIV. С помощью этой простой техники вы можете добавлять динамические и интерактивные элементы на свои веб-страницы.