1

Есть раскрывающийся список с двумя колонками, которые нужно упорядочить так, чтобы слева были пункты с номером .1, а справа .2, т.е. слева 1.1,2.1,3.1 и т.д., а справа 1.2,2.2,3.2 и т.д., причем как сейчас без пробелов между абзацами и чтобы список точно также разворачивался. Как это можно сделать? Фидл

.list1 .hide,
.list1 .next-hide ~ li {
  display: none;
}
.list1 input:checked + ul .next-hide ~ li {
  display: list-item;
}
.list1 input:checked + ul + label:before {
  display: none;
}
.list1 input:checked + ul + label:after {
  display: inline-block;
}
.list1 label {
  display: block;
  padding-left: 2em;
  text-align: center;
}
.list1 label:before {
  display: inline-block;
  content: "\f078";
}
.list1 label:after {
  display: none;
  content: "\f077";
}
.list1 ul {
  list-style: none;
}
.list1 ul {
  display: inline-block;
}
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="list1">
  Название:
  <input id="hd-2" class="hide" type="checkbox" />
  <ul>
    <li><span class="left">1.1 Lorem ipsum dolor sit amet, sit sanctus expetendis ea, in possim euismod cum. Suas equidem eos at, no eum velit reprehendunt. Amet omnium malorum ut quo</span><span class="right">1.2 Lorem ipsum dolor sit amet</span>
    </li>
    <li><span class="left">2.1 Debet alterum assentior his at</span><span class="right">2.2 Ea graeco feugiat usu, fugit audiam conclusionemque no sea, ex veritus consectetuer quo. Ei est tritani pertinax salutatus, te est mundi voluptatum, eos aperiam vivendum et.</span>
    </li>
    <li class="next-hide"><span class="left">3.1 Ei mea legimus</span><span class="right">3.2 Mel tamquam lobortis conceptam cu</span>
    </li>
    <li><span class="left">4.1 Nec eius erat errem ad</span><span class="right">4.2 recusabo adipiscing assueverit ei sed</span>
    </li>
    <li><span class="left">5.1 Eu vim movet vidisse honestatis, semper sensibus ius ne</span><span class="right">5.2 cu esse graece oportere has</span>
    </li>
    <li><span class="left">6.1 Vix in inimicus philosophia</span><span class="right">6.2 Mel suas lorem veniam et</span>
    </li>
    <li><span class="left">7.1 At mel omnes persecuti disputationi, te pro congue laboramus. Sonet possim sed ea, zril pertinacia repudiandae ne ius, duo tacimates iudicabit in.</span><span class="right">7.2  Est ea</span>
    </li>
    <li><span class="left">8.1 Cum nihil molestiae te, salutatus vulputate sea ne. Eam liber debitis consectetuer ea. </span><span class="right">8.2 Vis repudiare mnesarchum at. Imperdiet similique reprimique te pri, sanctus officiis pericula his no.</span>
    </li>
  </ul>
  <label for="hd-2" class="fa"></label>
  <hr />
</div>

7
  • а вы добавили метки javascript, jquery, чтобы можно было скриптом разметку поменять? или для чего?
    – Grundy
    12 апр 2016 в 7:54
  • @Grundy в случае, если невозможно стилями решить - да. просто я пока не нашел решения, как это можно сделать с помощью стилей
    – Вася
    12 апр 2016 в 8:04
  • Без изменения разметки - никак
    – Grundy
    12 апр 2016 в 8:05
  • 1
    с изменениями - просто разделите на две колонки
    – Grundy
    12 апр 2016 в 8:14
  • 2
    Давайте продолжим обсуждение в чате.
    – Grundy
    12 апр 2016 в 8:17

1 ответ 1

1

Спасибо @Grundy - нашли решение

.hide {
  display: none;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}
.clear {
  clear: both;
}
input:checked + .list1 {
  height: 110px;
  overflow: hidden;
}
input:checked + div + label:before {
  display: none;
}
input:checked + div + label:after {
  display: inline-block;
}
label.fa {
  display: block;
  text-align: center;
}
label:before {
  display: inline-block;
  content: "\f077";
}
label:after {
  display: none;
  content: "\f078";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Название:
<input id="hd-2" class="hide" checked type="checkbox" />
<div class="list1">
  <ul class="left">
    <li>1.1 Lorem ipsum dolor sit amet, sit sanctus expetendis ea, in possim euismod cum. Suas equidem eos at, no eum velit reprehendunt. Amet omnium malorum ut quo</li>
    <li>2.1 Debet alterum assentior his at</li>
    <li>3.1 Ei mea legimus</li>
    <li>4.1 Nec eius erat errem ad</li>
    <li>5.1 Eu vim movet vidisse honestatis, semper sensibus ius ne</li>
    <li>6.1 Vix in inimicus philosophia</li>
    <li>7.1 At mel omnes persecuti disputationi, te pro congue laboramus. Sonet possim sed ea, zril pertinacia repudiandae ne ius, duo tacimates iudicabit in.</li>
    <li>8.1 Cum nihil molestiae te, salutatus vulputate sea ne. Eam liber debitis consectetuer ea.</li>
  </ul>
  <ul class="right">
    <li>1.2 Lorem ipsum dolor sit amet</li>
    <li>2.2 Ea graeco feugiat usu, fugit audiam conclusionemque no sea, ex veritus consectetuer quo. Ei est tritani pertinax salutatus, te est mundi voluptatum, eos aperiam vivendum et.</li>
    <li>3.2 Mel tamquam lobortis conceptam cu</li>
    <li>4.2 recusabo adipiscing assueverit ei sed</li>
    <li>5.2 cu esse graece oportere has</li>
    <li>6.2 Mel suas lorem veniam et</li>
    <li>7.2 Est ea</li>
    <li>8.2 Vis repudiare mnesarchum at. Imperdiet similique reprimique te pri, sanctus officiis pericula his no.</li>
  </ul>
  <div class="clear"></div>

</div>
<label for="hd-2" class="fa"></label>
<hr />

фидл

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.