onclick show hide

by Jordan Dayton

HTML

<div id="div-menu-list">
    <div id="tabone">Basic Training Regisration</div>
    <div id="tabtwo">Intermediate Training Regisration</div>
</div>

<div id="box-one" class="box"><iframe width="300" height="150" style="width: 100%; height: 1500px;" src="https://artemishealth.jetwebinar.com/basictraining"></iframe></div>
<div id="box-two" class="box"><iframe width="300" height="150" style="width: 100%; height: 1500px;" src="https://artemishealth.jetwebinar.com/intermediatetraining"></iframe></div>

CSS

div-menu-list {
  padding: 10px;
}

#tabone, #tabtwo {
  background: red;
  width: auto;
  display: inline-block;
  padding: 20px;
  margin-right: 10px;
  cursor: pointer;
}
#box-one {
    display: none;
    width:200px height:200px;
    background:green;
}
#box-two {
    display: none;
    width:200px height:200px;
    background:blue;
}
#box-three {
    display: none;
    width:200px height:200px;
    background:gray;
}

JavaScript

$("#div-menu-list div").click(function () {
    $('.box').hide().eq($(this).index()).show();
});