В HTML можно реализовать раскрывающийся div (плавающее окно) по клику с помощью JavaScript и CSS.
Сначала мы создаем структуру HTML. Для простоты рассмотрим пример с одним раскрывающимся div:
<button id="toggleButton">Нажми меня</button> <div id="content" class="hidden"> Сюда поместите контент, который будет внутри раскрывающегося div </div>
В данном примере у нас есть кнопка (button) с id "toggleButton", которая будет служить для открытия и закрытия раскрывающегося div. Раскрывающийся div (<div id="content" class="hidden">) с id "content" и классом "hidden" изначально скрыт.
Далее добавим стили CSS для класса "hidden", чтобы скрыть содержимое раскрывающегося div:
.hidden {
display: none;
}
В JavaScript мы добавим обработчик события для кнопки, который будет изменять состояние раскрывающегося div:
document.getElementById("toggleButton").addEventListener("click", function() {
var content = document.getElementById("content");
if (content.classList.contains("hidden")) {
content.classList.remove("hidden");
} else {
content.classList.add("hidden");
}
});
В этом обработчике события мы получаем ссылку на раскрывающийся div по его id ("content"), а затем проверяем, есть ли у него класс "hidden". Если класс есть, то мы удаляем его, чтобы показать содержимое раскрывающегося div. Если класс отсутствует, то мы добавляем его, чтобы скрыть содержимое раскрывающегося div.
Теперь, при клике на кнопку, раскрывающийся div будет изменять свое состояние: показываться, если спрятан, и скрываться, если открыт.