input[type=radio] {
display: block;
}
input[type=radio] + div {
display: none;
}
input[type=radio]:checked + div {
display: block;
}
HTML<input type="radio" id="radio1" name="radio1" class="togglme" value="1"/>
<div>Toggle me div 1</div>
<input type="radio" id="radio2" name="radio1" class="togglme" value="2"/>
<div>Toggle me div 2</div>
<input type="radio" id="radio3" name="radio1" class="togglme" value="3"/>
<div>Toggle me div 3</div>
Working sample here.
<html>
<head>
<style type="text/css">
input[type=radio] {
display: block;
}
input[type=radio] + div {
display: none;
}
input[type=radio]:checked + div {
display: block;
}
</style>
</head>
<body>
<input type="radio" id="radio1" name="radio1" class="togglme" value="1"/>
<div>Toggle me div 1</div>
<input type="radio" id="radio2" name="radio1" class="togglme" value="2"/>
<div>Toggle me div 2</div>
<input type="radio" id="radio3" name="radio1" class="togglme" value="3"/>
<div>Toggle me div 3</div>
</body>
</html>
Zephyr_hex, I tried to put it in a web page, but unfortunately it doesn't display the text when I click the radio buttons. Am I missing something?
Open in new window