How to show hidden ul when checkbox is checked using css?

Question

I have these elements :

<label class="tog" for="toggle">&#9776;</label>
<input type="checkbox" id="toggle">
<ul class="tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Organizations</a></li>
    <li><a href="#">Take Action</a></li>
    <li><a href="#">Resourses</a></li>
    <li><a href="#">Contact</a></li>
</ul>

and the css :

.tabs{display:none}

#toggle:checked+ .tabs{
        display:block
}

I also tried :

#toggle:checked~ .tabs{
    display:block
}

But it still doesn't show up the hidden <ul class="tabs">

Answer 1

Target your input instead.

 .tabs { display: none; } input[type=checkbox]:checked ~ .tabs{ display: block; } 

 <label class="tog" for="toggle">&#9776;</label> <input type="checkbox" id="toggle"> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Organizations</a></li> <li><a href="#">Take Action</a></li> <li><a href="#">Resourses</a></li> <li><a href="#">Contact</a></li> </ul> 

Answer 2

Try this.

.tabs{
    display:none
}

#toggle:checked + .tabs{
    display:block
}

The spacing makes a difference.

Answer 3

.tabs {
  display: none;
}

#toggle:checked + .tabs {
  display: block;
}

This is working for me.

Answer 4

Because demo snippets cannot be inserted into comments...

Your code works , test snippets below :

• CSS

#toggle:checked + .tabs{
   display:block
}

 .tabs{display:none} #toggle:checked + .tabs{ display:block } 

 <label class="tog" for="toggle">&#9776;</label> <input type="checkbox" id="toggle"> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Organizations</a></li> <li><a href="#">Take Action</a></li> <li><a href="#">Resourses</a></li> <li><a href="#">Contact</a></li> </ul> 

• CSS

#toggle:checked ~ .tabs{
   display:block
}

 .tabs { display: none } #toggle:checked~.tabs { display: block } 

 <label class="tog" for="toggle">&#9776;</label> <input type="checkbox" id="toggle"> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Organizations</a></li> <li><a href="#">Take Action</a></li> <li><a href="#">Resourses</a></li> <li><a href="#">Contact</a></li> </ul> 

Your problem stands else where :( Please clarify question with bits of codes that actually shows your issue.