Как правильно сверстать блок?
Здравствуйте. Есть блок состоит из 6 карточек.
При нажатии на карточку должно открываться вниз меню ещё из 6 карточек и при повторном нажатии закрыться.
Подскажите пожалуйста, как реализовать в html + js или через библиотеки?
Дополнительно:
Что конкретно у Вас не получается? Где Ваш код, с которым нужно помочь?
document.addEventListener('DOMContentLoaded', function () { const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('click', function () { cards.forEach(c => { if (c !== card) { c.classList.remove('active'); } }); card.classList.toggle('active'); }); }); }); |
document.addEventListener('DOMContentLoaded', function () { const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('click', function () { cards.forEach(c => { if (c !== card) { c.classList.remove('active'); } }); card.classList.toggle('active'); }); }); });
вот код. Справляется, но теперь другая проблема.
Открывается только в ширину блока, как сделать открытие (ширина всего контейнера)?
.card { // cursor: pointer; // overflow: hidden; .card-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin-top: 15px; background: rgba(255, 255, 255, 0.70); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; gap: 50px; } .card.active .card-content { // max-height: 100%; // } // .card-box { // box-sizing: border-box; // } |
.card { // cursor: pointer; // overflow: hidden; .card-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin-top: 15px; background: rgba(255, 255, 255, 0.70); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; gap: 50px; } .card.active .card-content { // max-height: 100%; // } // .card-box { // box-sizing: border-box; // }
Ответы:
Здесь вообще библиотеки не нужны. Так как чистый JavaScript справится с этим.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для правильной верстки блока на веб-странице следует использовать соответствующие HTML и CSS элементы. Ниже приведен пример кода на языке HTML и CSS для создания стилизованного блока:
```html
<div class="block"> <h2>Заголовок блока</h2> <p>Текст в блоке</p> </div><div class="block"> <h2>Заголовок блока</h2> <p>Текст в блоке</p> </div>
.block { background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; margin: 10px; } .block h2 { color: #333; } .block p { color: #666; }
```
В данном примере мы создаем блок с заголовком и текстом. HTML элемент `
` и `
` для заголовка и текста соответственно.
В CSS мы задаем стили для блока, такие как цвет фона, цвет границы, отступы и внутренний отступ. Также стилизуем заголовок и текст внутри блока.
Помимо этого, важно следить за семантикой верстки и использовать правильные теги для разметки контента. Не забывайте также о респонсивности блока, чтобы он корректно отображался на различных устройствах.
Надеюсь, этот ответ поможет вам правильно сверстать блок на вашей веб-странице. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.