Show/Hide DIV onRadio Buttons

<div class="container">

<p>Click to open div on radio button  </p>

  <label class="radio-inline"><input type="radio" name="tab" value="igotnone" onclick="show1();" />
None</label>

  <label class="radio-inline"><input type="radio" name="tab" value="igottwo" onclick="show2();" />
Two</label>

<div id="div1" class="hide">
  <hr><p>Okay Cool! Here is the DIV1...</p>
<div class="card" style="width:400px">
    <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
  <br>



</div>
<div id="div2" class="hide">
  <hr><p>Okay Cool! Here is the DIV2 ...</p>
<div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Jane Doe</h4>
      <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    <img class="card-img-bottom" src="https://www.w3schools.com/bootstrap4/img_avatar6.png" alt="Card image" style="width:100%">
  </div>
</div>

</div>

<style>

.hide {
  display: none;
}
</style>


<script>
function show1(){
$("#div1").show();
$("#div2").hide();
}

function show2(){
$("#div1").hide();
$("#div2").show();
}

</script>


Download Code Sample