user3096206 user3096206 - 28 days ago 12
CSS Question

Radio button show/hide content

I am trying to achieve a show/hide result without javascript and just the radio button.

I've managed to get to this part:

<label for="show"><span>show</span></label>
<input type=radio id="show" name="group">
<label for="hide"><span>hide</span></label>
<input type=radio id="hide" name="group">
<span id="content">Content</span>


input {
display:none;
}

span#content {
display:none;
}
input#show:checked ~ span#content {
display:block;
}

input#hide:checked ~ span#content {
display:none;
}


Demo:
http://jsfiddle.net/vtfqW/

What I am trying to do now is to hide each time the "Show" and "Hide" buttons when they are active. So it will need to start with hidden content and just has the "Show" button and when you click it show the content, hide the "Show" button and show you the "Hide" button.

Is this possible without Javascript?

Thank you!

Answer

Place label tags after both in the input tags. Like below

<input type=radio id="show" name="group">
<input checked type=radio id="hide" name="group">
<label id="id1" for="show"><span id="id1">show</span></label>
<label id="id2" for="hide"><span id="id2">hide</span></label> 
<span id="content">Content</span>

Add these css rules to existing rules

input#show:checked ~ label#id1{
  display:none;
}
input#show:checked ~ label#id2{
   display:block;
}

input#hide:checked ~ label#id2{
   display:none;
}
input#hide:checked ~ label#id1{
   display:block;
}

demo http://jsfiddle.net/vtfqW/1/