Hide Show content-list with only CSS, no javascript used

Question

I\'ve been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I\'ve managed to make this action:

Answer 1

I know it's an old post but what about this solution (I've made a JSFiddle to illustrate it)... Solution that uses the :after pseudo elements of to show/hide the switch link itself (in addition to the .alert message it must show/hide). When the pseudo element loses it's focus, the message is hidden.

The initial situation is a hidden message that appears when the with the :after content : "Show Me"; is focused. When this is focused, it's :after content becomes empty while the :after content of the second (that was initially empty) turns to "Hide Me". So, when you click this second the first one loses it's focus and the situation comes back to it's initial state.

I started on the solution offered by @Vector I kept the DOM'situation presented ky @Frederic Kizar

HTML:

Some message to show here

CSS:

body {
    display: inline-block;
}
.span3 ~ .span2:after{
    content:"";
}
.span3:focus ~ .alert  {
    display:block;
}
.span3:focus ~ .span2:after  {
    content:"Hide Me";
}
.span3:after  {
    content: "Show Me";
}
.span3:focus:after  {
    content: "";
}
.alert  {
    display:none;
}