IFrame or Hidden Div is suitable for sliding content?

Question

i am bad at explanation , so bear with me for a moment. I would like to ask on some opinion. Refer to the image i drawn , the Black border is fixed and would not change. What i am trying to achieve is by clicking at Button A/B/C will look into different content.
1)A/B/C Button what technique should i use as i wanted an arrow to stick to the button i click.Should i use Radio button and make it like button ? What is this technique call ?
2)the Blue border is where my content will change according to the button click. Should i use IFRAME or should i use DIV and Hidden it ?

I'm new to web designing. Trying to learn as much as possible.

Please refer the image

Answer 1

if you use iframe it will take time to call to server and page load and as request goes higher so it won't remain efficient too use jquery to show hide here is an example of mine

$(function(){
    $('.tabbox_1').show();
    $('.tab').click(function(){
        var tabid = $(this).attr('id').replace('tab_','');
        $('.tab').removeClass('active');
        $(this).addClass('active');
        if($('.tabbox_'+tabid).is(':visible')){
             $('.tabbox').hide();
        }
        $('.tabbox_'+tabid).fadeIn();

    });

});

Then there is html code for div

<div>
    <ul class="tabpan">
        <li class="tab" id="tab_1">One</li>
        <li class="tab" id="tab_2">One</li>
        <li class="tab" id="tab_3">One</li>
    </ul>
    <div>
         <div class="tabbox tabbox_1">
              tab 1 content
         </div>
         <div class="tabbox tabbox_2">
              tab 2 content
         </div>
         <div class="tabbox tabbox_3">
              tab 3 content
         </div>
</div>

dont forget style

<style>
.tabbox{display:none}
.tabpan li{float:left;padding:5px;background:#ddd;color:#fff;font-weight:bold;border:1px solid #ddd}
.tabpan .active{background:#fff;color:#ddd;border:1px solid #ddd}
</style>

Hope this works for you

If you still want to stick with iframe and radio button there is a css code which i have tried with two images it works you can change that background image on check of radio button

.checkbox_wrapper{position: relative;width:45px;height:101px;margin:10px auto;}
.checkbox_wrapper input[type="checkbox"] {opacity:0;width:45px;height:101px;position: absolute;top: 0;left: 0;z-index: 2;}
.checkbox_wrapper input[type="checkbox"] + label{background:url('../imgs/off.png') no-repeat;width:45px;height:101px;display:inline-block;padding: 0 0 0 0px;position: absolute;top: 0;left: 0;z-index: 1;}
.checkbox_wrapper input[type="checkbox"]:checked + label{background:url('../imgs/onn.png') no-repeat;width:45px;height:101px;display:inline-block;padding: 0 0 0 0px;}

here is the html code use your images for check and uncheck and yes there is one onother css class for horizontal representation. Its very random so forgive me if you find mistake

.checkbox_wrapper{float:left;margin:4px;}
<div class="checkbox_wrapper">
        <input type="checkbox" id="chk_btn" />
        <label></label>
    </div>