Show DIV on startup of page, hide when click on any radio button

Question

So, I decided to make page where all content is in hidden DIV. Basicly page start blank without any content. After clicking on radio-buttons it show one DIV, and hide another.

This is buttun named "Button_name" that will open "opt3" div's content.

<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" value="opt3"/>
<label for="tab-3" class="tab-label-3"> BUTTON_NAME </label>

After clicking this will open "opt3" div:

<div id="opt3" class="desc" style="display: none;">
content of div
</div>

And now:

How to make some text appear in new DIV when page is opened (or refreshed by F5), but closed directly after clicked any button in menu options?

EDIT:

Script for buttons
$(document).ready(function(){ 
    $("input[name=radio-set]").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#"+test).show();
    }); 
});

OK I figure it out in easiest way, I think!

If someone want same effect as me - you just have to put in main div (where any other div will show after clicking on menu buttons) normal "opt" div, but without display:none.

<div id="opt20" class="desc" >
Ble ble 20
</div>

This will show "ble ble 20" only when page start, and after clicking on any menu button will hide away. Be sure that in future, you will not use again "opt20" button, because it will show you your start content.

Answer 1

There are tons of tutorials and info on jQuery. It really takes playing with it and studying the different options it has. Here is a quick sample of what you can do. Not exactly what you might need, but it might give you a start. jQuery is quite powerful. You will have to include the jQuery library js file in your code. http://jquery.com/

Some HTML

<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" value="opt3"/> Check me
<br /><input id="btn1" type="button" value="Click Me">
<div id="opt3" class="desc" style="display: none;">
I'm opt3 hidden from the start
</div>
<div id="otherdiv" class="desc" style="display: none;">
some other div that is shown when opt3 is clicked
</div>

and the jQuery

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#opt3").show();
        if($("#otherdiv").is(':visible')){
            $("#otherdiv").hide();
        }
    });
    $("#tab-3").change(function(){
        $("#otherdiv").show();
        if($("#opt3").is(':visible')){
            $("#opt3").hide();
        }
    });

});

See it in action http://jsfiddle.net/8fUXW/1/

BTW Google specific things you need then piece them together instead of trying to find an exact solution. That would be pretty difficult.