Input with both Radio and checkbox characteristics - html

Question

I am looking to design a input field such that it will obey radio buttons characteristics as well as checkbox characteristics.
The requirement is that there are some bars, to which when I click, a text "hello" will be shown adjacent to that bar. and when I click on another bar, the "hello" text from the previous bar should hide and the clicked bar's "hello" text should be visible.
This is happening in this fiddle
label {
display: block;
width: 100px;
height: 20px;
background-color: cornflowerblue;
position: relative;
margin-top: 10px;
cursor: pointer;
}
span {
display: none;
}
input[type="radio"] {
visibility: hidden;
position: absolute;
pointer-events: none;
}
:checked + span {
display: block;
position: absolute;
left: 100%;
}
But what I want is each bar should act as toggle button to show/hide the "hello" text. I can achieve this if I use checkboxes instead of radio button but I will lose the behavior which I achieved above using radio buttons.
I am looking for a pure css solution.
Thanks in advance.
EDIT:
This is what I want. Fiddle
But using only css.

Answer 1

If you can afford to edit html and really can't afford to use any javascript at all you can do it by using <input type='reset' />, but this is a hacky way to handle such functionality - javascript should always be your first choice for such tasks.
label {
display: block;
width: 100px;
height: 20px;
background-color: cornflowerblue;
position: relative;
margin-top: 10px;
cursor: pointer;
}
span {
display: none;
}
input[type="radio"] {
visibility: hidden;
position: absolute;
pointer-events: none;
}
input[type="reset"] {
position: absolute;
border:0;padding:0;margin:0;background:transparent;
width:100%;
height:100%;
display: none;
}
:checked + span {
display: block;
position: absolute;
left: 100%;
}
:checked + span + input[type="reset"] {
display: block;
opacity:0;
}
<form>
<label>
<input type="radio" name="test"></input> <span>Hello</span>
<input type='reset' />
</label>
<label>
<input type="radio" name="test"></input> <span>Hello</span>
<input type='reset' />
</label>
<label>
<input type="radio" name="test"></input> <span>Hello</span>
<input type='reset' />
</label>
<label>
<input type="radio" name="test"></input> <span>Hello</span>
<input type='reset' />
</label>
<label>
<input type="radio" name="test"></input> <span>Hello</span>
<input type='reset' />
</label>
<label>
<input type="radio" name="test"></input> <span>Hello</span>
<input type='reset' />
</label>
</form>