Radio button show/hide content

Question

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 1

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/

Answer 2

If you want make content toggle. Menu toggle example.

input#toogle-content {
  display:none;
}
label#toogle-content div{
   background:silver;
}
span#content {
  display:none;
  background:#333;
  color:#fff;
}
input#toogle-content:checked ~ span#content{
  display:block;
}

<input type="checkbox" id="toogle-content">
<label for="toogle-content" id="toogle-content"><div>Menu</div></label>
<span id="content">Home<br>Marks<br>Other</span>