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); 
      }
    })();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.