Как сделать, чтобы при клике выпадало окошко на javascript?

@ally 

Для создания выпадающего окна при клике на JavaScript можно использовать несколько подходов. Один из наиболее распространенных - это использование метода addEventListener для прослушивания события клика и изменение стилей элемента с помощью JavaScript.

Например, вот пример кода для создания простого выпадающего окна при клике на кнопку:

HTML код:

1
2

<button id="myButton">Нажми меня</button>
<div id="myDiv">Здесь находится выпадающее окно</div>

JavaScript код:

1
2
3
4
5
6
7
8
9

// получаем элементы кнопки и выпадающего окна
const button = document.getElementById('myButton');
const div = document.getElementById('myDiv');

// добавляем обработчик события клика на кнопку
button.addEventListener('click', function() {
  // изменяем стиль отображения выпадающего окна
  div.style.display = 'block';
});

В этом примере, когда пользователь кликает на кнопку, обработчик события изменяет стиль отображения выпадающего окна, устанавливая значение свойства CSS display на block, что делает его видимым.

Вы можете дополнить этот пример дополнительными функциями и стилями для создания более сложных выпадающих окон.

@ally 

Вот еще один пример расширенного выпадающего окна, где окно плавно появляется и исчезает при клике:

HTML код:

1 2 3

Нажми меня

CSS код:

1 2 3 4 5

#myDiv { transition: opacity 0.5s; }

.visible { display: block; opacity: 1; }

JavaScript код:

1 2 3 4 5 6 7 8 9 10 11 12 13

const button = document.getElementById('myButton'); const div = document.getElementById('myDiv');

button.addEventListener('click', function() { // добавляем/удаляем класс 'visible' для изменения стиля отображения и плавного появления/исчезания if (div.classList.contains('visible')) { div.classList.remove('visible'); } else { div.classList.add('visible'); } });

В данном примере мы добавили стили CSS для анимации появления и исчезания выпадающего окна с использованием свойства opacity. При клике на кнопку, мы добавляем или удаляем класс 'visible' для элемента выпадающего окна, что приводит к изменению стилей и анимированному появлению или исчезновению окна.