仅使用CSS在div上单击时如何显示另一个div

Question

I want to use CSS only to show a div when clicked on another div

Here is my HTML code

<div id="contentmenu">
                <div class="show">
                    <a class="show">
                        My Student
                    </a>
                </div>
                <div class="hidden">
                        <a href="#">Link 1</a><br/>
                        <a href="#">Link 2</a><br/>
                        <a href="#">Link 3</a><br/>
                </div>
</div>

My CSS code is

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
}

So how to display div (class = hidden) when clicked on the div (class = show) using CSS only

Answer 1

You could do it with the Checkbox Hack , though be sure to make sure browser support is sufficient. It would look like this:

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
    display: block;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
}
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
input[type=checkbox]:checked ~ .hidden {
   display: block;
}

with this HTML:

<div id="contentmenu">
    <label for="toggle-1"><a class="show">
      My Student
      </a></label>
<input type="checkbox" id="toggle-1">
  <div class="hidden">
    <a href="#">Link 1</a><br/>
    <a href="#">Link 2</a><br/>
    <a href="#">Link 3</a><br/>
  </div>
</div>  

Here is a demo: http://jsbin.com/exuvez/1/edit

Answer 2

For no hacks, and no javascript you can achieve what you want with a hover event. Just a small change and addition to the css:

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
  width:100%;
}

.show:hover + .hidden {
  display:block;
}
.hidden:hover {
 display:block; 
}

So width:100% has been added to .hidden, and two rules for the hover event.

http://codepen.io/anon/pen/eCmox