仅使用CSS切换-选择下一个具有特定类的元素

Question

I need when the Trigger is clicked(checkbox checked) that the content(ul) to appear as a horizontal list, below the wrapper(red and blue colors).

Looks like the + (for next) doesn't work because even if is the next element, it is in a different parent.

 .wrapper { position: relative; height: 130px; background: red; } .lp { color: $white; position: absolute; height: 100%; top: 0; right: 0; background: blue; } .lp .toggle { position: relative; top: 50%; transform: translateY(-50%); padding: 20px; } .trigger { display:none;} .content { display: none; } .trigger:checked + .content { display: block; } 

 <div class="wrapper"> <div class="lp"> <div class="toggle"> <label for="menu-toggle"> <span>Trigger</span> </label> <input type="checkbox" class="trigger" id="menu-toggle"/> </div> <ul class="content"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> </div> 

Answer 1

Updated. So I've made a quick demo. Hopefully this is enough to get you going :)

 .checkbox:not(checked) { display: none; } .checkbox:not(checked) ~ .content { display: none; } .checkbox:checked ~ .content { display: block; } 

 <div class="wrapper"> <div class="lp"> <input type="checkbox" value="selected" id="1" class="checkbox"/> <label for="1" >Trigger</label> <ul class="content"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> </div> 

Answer 2

All you need to do, with the posted code of yours, is to move the input so it becomes the previous sibling of the ul .

With that the adjacent sibling selector + will work properly and toggle the hidden menu

Stack snippet

 .wrapper { position: relative; height: 150px; background: red; } section { position: relative; } section .content { background: yellow; padding: 20px; } .lp { color: $white; position: absolute; height: 100%; width: 100px; top: 0; right: 0; background: lightblue; } .lp .toggle { position: relative; top: 50%; transform: translateY(-50%); padding: 20px; } .lp .content { position: relative; transform: translateY(15px); padding-left: 18px; list-style: none; } .content, .trigger { display: none; } .trigger:checked+.content { display: block; } 

 <div class="wrapper"> <div class="lp"> <div class="toggle"> <label for="menu-toggle"> <span>Trigger</span> </label> </div> <input type="checkbox" class="trigger" id="menu-toggle" /> <ul class="content"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> </div> 

---

As mentioned in a comment, if you have content that is sibling of your .wrapper and also needs to be toggled, you can instead use the general sibling selector ~ .

For the input to be able to "see" eg both these elements, put it before the .wrapper .

Stack snippet

 .wrapper { position: relative; height: 150px; background: red; } section { position: relative; } section .content { background: yellow; padding: 20px; } .lp { color: $white; position: absolute; height: 100%; width: 100px; top: 0; right: 0; background: lightblue; } .lp .toggle { position: relative; top: 50%; transform: translateY(-50%); padding: 20px; } .lp .content { position: relative; transform: translateY(15px); padding-left: 18px; list-style: none; } .content, .trigger { display: none; } .trigger:checked ~ .wrapper .content, .trigger:checked ~ section .content { display: block; } 

 <input type="checkbox" class="trigger" id="menu-toggle" /> <div class="wrapper"> <div class="lp"> <div class="toggle"> <label for="menu-toggle"> <span>Trigger</span> </label> </div> <ul class="content"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> </div> <section> <div class="content"> Some other dummy text that will show... </div> </section>