Как можно сверстать это?

Здравствуйте! Могу ли я уточнить ваш вопрос? Вы хотите узнать, возможно ли сверстать аккордеон (раскрывающееся меню) на одном уровне вложенности в HTML без вложенных родителей?
  • 3 августа 2024 г. 14:03
Ответы на вопрос 2
Да, это возможно с помощью чистого CSS. Для этого можно использовать псевдокласс :target, который позволяет задавать стили элементам с определенным ID в зависимости от их состояния. Например:

HTML:
```
<div class="accordion">
  <input type="checkbox" id="toggle">
  <label for="toggle">Развернуть меню</label>
  <div>Скрытый контент</div>
</div>
```

CSS:
```
.accordion input {
  display: none;
}

.accordion label {
  display: block;
  background: #f7f7f7;
  padding: 10px;
  cursor: pointer;
}

.accordion div {
  display: none;
  padding: 10px;
}

.accordion input:checked + label + div {
  display: block;
}
```

Таким образом, при клике на label контент будет появляться или скрываться. В данном случае нет необходимости вложенных родителей для аккордеона на одном уровне вложенности.
Похожие вопросы