There is a drop-down list with two columns that need to be ordered so that the items with the number .1 are on the left and .2 are on the right, i.e. 1.1.2.1.3.1 on the left, etc., and 1.2.2.2.3.2, etc., on the right, and moreover, as it is now without spaces between paragraphs, so that the list is exactly the same. How can I do that? Feedl

.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>

  • and you added javascript, jquery tags so that you can change the markup by the script? or for what? - Grundy
  • @Grundy in case it is impossible to solve the styles - yes. I just haven't found a solution yet, how can this be done with the help of styles - Vasya
  • Without changing the markup - no way - Grundy
  • one
    with changes - just divide into two columns - Grundy
  • 2
    Let's continue the discussion in the chat . - Grundy

1 answer 1

Thanks @Grundy - found a solution

 .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 />

fiddle