show/hide: <input id="inp1" class="del" type="radio" name="multi_note" value="1" onclick="showMe(this)">
<div id="div1" style="display:block; display:none;">
<p id="p1"> Text 1 </p>
</div>
show/hide: <input class="del" id="inp2" type="radio" name="multi_note" value="2" onclick="showMe1(this)">
<div id="div2" style="display:block; display: none; ">
<p id="p2"> Text 2 </p>
</div>
function showMe (box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById('div1').style.display =vis;
document.getElementById('div1').style.display =none;
}
function showMe1 (box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById('div2').style.display =vis;
document.getElementById('div2').style.display =none;
}
(function (){
var checkHide = document.getElementsByClassName('del');
for (var i=0; i<checkHide.length; ++i){
checkHide[i].addEventListener('click', function(){
if (this.checked){
for (var j=0; j<checkHide.length; ++j){
checkHide[j].checked = false;
}
this.checked = true;
}
}, false);
}
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.