Задать вопрос
@ligisayan

Как сделать правильный раскрывающийся список на css?

Приветствую! Имеется раскрывающийся абзац на css фидл
.hide,
.hide + label ~ p {
  display: none;
}
.hide:checked + label + p {
  display: block;
}

<div>
  <input type="checkbox" id="hd-1" class="hide">ТЕсттектстектстектстектстектстектстектстектстектстектстектс
  <label for="hd-1">
    <img src="https://ru.wikipedia.org/static/favicon/wikipedia.ico" alt="Читать далее">
  </label>
  <p>
    <br>Новыйновыйновыйновыйновый
    <br>
    <br>ЕщеЕщеЕщеЕщеЕщеЕще.</p>
</div>

И есть раскрывающийся список
<div>Название:
  <ul>
    <li>пункт 1.</li>
    <li>пункт 2</li>
    <li>пункт 3.</li>
    <li>
      <input id="hd-2" class="hide" type="checkbox" />
      <label for="hd-2">
        <img src="https://ru.wikipedia.org/static/favicon/wikipedia.ico" alt="Читать далее" />
      </label>
      <p class="dotted">пункт 4.</p>
    </li>
  </ul>
</div>

Вопрос: как подправить раскрывающийся список, так, чтобы он логично отображался при раскрытии (желательно с помощью стилей)? сейчас напротив точки - иконка вики, а пункт меню отодвигается ниже при раскрытии. хочется добиться того, чтобы при раскрытии список выглядел цельным
bb9bafe6ddcd4165890a06722e955060.png966bbc576b2f4f8c9af157b6c3f5a5ed.png
  • Вопрос задан
  • 3783 просмотра
Подписаться 2 Оценить Комментировать
Решения вопроса 1
GogElf
@GogElf
Хокаге
https://jsfiddle.net/h3dqx79s/1/ как тебе такой вариант?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@skazi_premiere
Верстаем как умеем ;) HTML/CSS/JS
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы