Multiple CSS radio show hide on the same page - html

Question

I have a working show/hide in CSS, using the radio type. All is good but when I try to add more then one show/hide they all open at the same time.
That makes sense to me, since they have the same ids and names. So I edited those, all is different, but when they go on the same page they lose the formatting and a mess comes out of it.
Any advice is appreciated (unless your advice is using js or jquery: I know it's easy with js but I really want to use css/html only)
Thanks!
/* showhide css */
input#show, input#hide {
display:none;
}
div#paragraph {
display:none;
}
input#show:checked ~ div#paragraph {
display:block;
float: left;
padding-top:20px;
}
input#hide:checked ~ div#paragraph {
display:none;
}
.showthis {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 200px;
font-size: 15px
}
.hidethis {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
font-size:13px;
/* showhide css 01 */
input#show01, input#hide01 {
display:none;
}
div#paragraph01 {
display:none;
}
input#show01:checked ~ div#paragraph01 {
display:block;
float: left;
padding-top:20px;
}
input#hide01:checked ~ div#paragraph01 {
display:none;
}
.showthis01 {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 200px;
font-size: 15px
}
.hidethis01 {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
font-size:13px;
}
<label for="show">
<span class="showthis">[Show]</span></label><input type=radio id="show" name="group"/><label for="hide"><span class="hidethis">[Hide]</span></label>
<input type=radio id="hide" name="group"/>
<div id="paragraph">
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
</div>
<br /><br /><br /> <br />
<label for="show01">
<span class="showthis01">[Show01]</span></label><input type=radio id="show01" name="group01"/><label for="hide01"><span class="hidethis01">[Hide01]</span></label>
<input type=radio id="hide01" name="group01"/>
<div id="paragraph01">
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
</div>

Answer 1

The idea is to use next selector + for show/hide a single item and use sibling ~ for all.
DEMO: http://jsfiddle.net/qjsmm6eq/3/
HTML
<label for="all">show all</label>
<input type="radio" name="radio" class="showall"/>
<label for="all">hide all</label>
<input type="radio" name="radio" class="hideall" />
<br/><br/><br/><br/>
<label for="a">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">a</div>
<br/><br/>
<label for="b">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">b</div>
CSS
.content {
visibility: hidden;
color: red;
}
.single:checked + .content {
visibility: visible;
}
.showall:checked ~ .content {
visibility: visible;
}
.hideall:checked ~ .content {
visibility: hidden;
}
EDIT: The checkbox solution is available here http://jsfiddle.net/qjsmm6eq/
EDIT 2: Changed back to radio, show/hide all on two buttons, and one for single item, the best I can do for now.

Answer 2

I followed the idea of sdcr (thank you very much!) and used checkboxes: they worked great, so even though is not a proper answer since my original question was different I paste the code anyway:
/* Showhide CSS only */
/* function */
label {
cursor: pointer;
}
#showhide {
display: none; /* hide the checkbox */
}
#paragraph {
display: none;
}
#showhide:checked + #paragraph {
display: block;
}
/* Showhide CSS only 02*/
label {
cursor: pointer;
}
#showhide01 {
display: none; /* hide the checkbox */
}
#paragraph01 {
display: none;
}
#showhide01:checked + #paragraph01 {
display: block;
}
<label for="showhide"><span class="title">I am the first</span></label>
<input type="checkbox" id="showhide"/>
<div id="paragraph">
original text
</div>
<br /> <br />
<label for="showhide01"><span class="title">I am the second</span></label>
<input type="checkbox" id="showhide01"/>
<div id="paragraph01">
secondary text
</div>