Как сделать выпадающее окно

Рейтинг: 0Ответов: 1Опубликовано: 15.05.2023

Как сделать так чтобы при нажатии на кнопку открывалось выпадающее окно как показано на скрине и при этом чтобы нижняя плашка под выпадающим окном смещалась вниз введите сюда описание изображения

css html
Источник: Stack Overflow на русском

Ответы

▲ 2

Как сделать так чтобы при нажатии на кнопку открывалось выпадающее окно как показано на скрине и при этом чтобы нижняя плашка под выпадающим окном смещалась вниз

Например вот так можно такое реализовать.

Сделать некий шаблон такого "окна", потом клонировать его и заполнять нужными данными.

const os = document.querySelector('section')
const ot = document.querySelector('.test')
let arr = []
const txt = 'Свернуть'
os.addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'BUTTON') return
  const oa = o.closest('article')
  if (o.textContent == txt) {
    oa.nextElementSibling.remove()
    o.textContent = 'Еще'
    return
  }
  o.textContent = txt
  const id = oa.dataset.id
  const od = arr.find(o => o.id == id)
  const oi = ot.cloneNode(true)
  const ob = oi.querySelectorAll('b')
  Array('phone', 'email', 'website').forEach((k, i) => ob[i].textContent = od[k])
  oa.insertAdjacentElement('afterend', oi)
})
fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(res => {
    arr = res
    res.forEach(o => {
      const html = `<article data-id='${o.id}'>
        <h1>${o.username}</h1>
        <p>Имя <b>${o.name}</b></p>
        <button>Еще</button>
      </article>`
      os.insertAdjacentHTML('beforeend', html)
    })
  })
  .catch(console.log)
article {
  margin: 10px;
  padding: 10px;
  border: 1px solid green;
  border-radius: 10px;
}
.test {
  display: none;
  margin: 10px;
  padding: 10px;
  border: 1px solid red;
  border-radius: 10px;
}
section .test {
  display: block;
}
<section>
</section>
<section class='test'>
  <p>Телефон <b></b></p>
  <p>Почта <b></b></p>
  <p>Сайт <b></b></p>
</section>