There is a drop-down paragraph on 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>

And there is a drop down list

 .hide, .hide + label ~ p { display: none; } .hide:checked + label + p { display: block; } 
 <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>

Question: how to correct the drop-down list, so that it is beautifully displayed when opening (preferably using styles)? until I get sloppy Fidl

  • if you need a list , use the list item for this: <ul> , <ol> - Grundy
  • Well, while it is clear that you are trying to score a screwdriver nail. Describe in more detail what you mean by saying: so that it is beautifully displayed when opened . - Grundy
  • added a question - I hope it will be clearer - Vasya
  • one
    this is not what you want? jsfiddle.net/Cerebrl/uhykY - Batanichek
  • @Grundy in disclosure is now opposite the point - the wiki icon, and the menu item below. I want to make sure that the list looks solid when opening - Vasya

1 answer 1

Beauty - the concept, after all, is subjective. Try to set the task more specifically. I find the method below pretty pretty. Hope will help. And yet, it is better to hide the checkbox using absolute positioning and “pull U aside, rather than use display: none - this is fraught with problems on some mobile devices and electronic books.

Code Pen

PS with the list is clear - you want "beautiful." And with a paragraph?

 @import url(http://weloveiconfonts.com/api/?family=entypo); div { width: 300px; background: #f5f5f5; box-shadow: 0 1px 3px rgba(0,0,0,0.3); padding: 10px 20px; margin: 20px auto; } a, a:visited { text-decoration: none; color: #333; } p { margin: 0; } ul { width: 120px; } div, li { font: 26px/1.5 'Segoe Ui', sans-serif; list-style: none; color: #333; position: relative; border-bottom: 1px solid #eee; } li:first-child { border-top: 1px solid #eee; } li:last-child { border-bottom: none; } .level1 a { border-right: 2px solid #333; border-radius: 2px; display: block; width: 100%; transition: all .3s ease; } .level1 a::after { content:"\e766"; font-family: 'entypo', sans-serif; position: absolute; transition: all .3s ease; right: -8px; color: transparent; } .level1 a:hover { border-right: 10px solid transparent; } .level1 a:hover::after { right: 0px; color: #333; } .hide { position: absolute; left: -9999px; } .hide + label { position: relative; display: block; } .hide + label img { position: absolute; height: 30px; top: 5px; left: -36px; } .hide + label::before { content:''; height: 2px; background: #333; border-radius: 0 0 2px 2px; position: absolute; bottom: 0; width: 100%; transition: all .3s ease; } .hide + label::after { content:"\e764"; font-family: 'entypo', sans-serif; position: absolute; transition: all .3s ease; right: -3px; top: 8px; color: transparent; } .hide + label:hover::after { top: 0px; color: #333; } .hide + label ~ p { position: relative; transition: all .3s ease; border-radius: 2px; top: -10px; opacity: 0; } .hide:checked + label::before { height: 40px; background: transparent; bottom: -40px; } .hide:checked + label::after { top: 0px; color: #333; transform: rotateX(-180deg); } .hide:checked + label + p { top: 0; opacity: 1; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } 
 <div>Название: <ul> <li class="level1"><a href="#">Пункт 1</a></li> <li class="level1"><a href="#">Пункт 2</a></li> <li class="level1"><a href="#">Пункт 3</a></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="Читать далее" /> Wiki</label> <p class="level1"><a href="#">Пункт 4</a></p> </li> </ul> </div>

  • yes, that's how everything is ok- thanks! the paragraph is fine)) - Vasya