Подскажите примеры скрипта раскрытия и скрытия блока на Javascript

Question

Нужны примеры скриптов для плавного появления и скрытия блока подобных как тут https://snipp.ru/jquery/jquery-ui-datepicker.

Суть скрипта в том, что при нажатии на поле ввода (input) плавно появляется скрытый блок, а при повторном клике на поле ввода, внутри раскрытого блока и за пределами данных элементов данное окно должно плавно скрыться. При этом всплывающий блок не должен сдвигать вниз нижерасположенные элементы верстки, а открываться сверху данных элементов, перекрывая их.

Касаемо отображения появившегося блока - тут эффект подобный dropmenu когда появляется выпадающий список поверх всего остального, а никак при эффекте accordion, когда раскрывающийся блок смещает вниз другие элементы.

Примеры интересует на javascript, а не jquery.

Answer 1

Такую вещь можно и без js сделать.

.input-wrap {
  display: inline-block;
  position: relative;
}

.input-drop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(0) translateY(100%);
  opacity: 0;
  z-index: 100;
  background-color: white;
  transition: transform 500ms, opacity 1500ms;
  pointer-events: none;
}

.input-drop-inner {
  border: 1px dashed red;
  padding: 8px;
}

.input:focus + .input-drop {
  pointer-events: auto;
  transform: scaleY(1) translateY(100%);
  opacity: 1;
}

<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>
<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>
<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>
<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>
<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>
<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>
<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>
<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>
<div class="input-wrap">
  <input type="text" class="input" placeholder="Введите текст">
  <div class="input-drop"><div class="input-drop-inner">1<br>2<br>3<br>4<br>5<br>5</div></div>
</div>

БЛОГ НА HUSL

Подскажите примеры скрипта раскрытия и скрытия блока на Javascript

Ответы (1 шт):