javascript - textareas don't appear with correct cols

i've a little javascript that let me show and hide some textareas.

i start with 1 textarea shown and the other 4 hidden with property display:none;

the first textarea is shown correct, but when i run the javascipt to hide thhe first and show one of the other textareas, the cols property is not readed and the textarea is shown small.

Here is the js code:

<script language="javascript">
function collapser(tab_id) {

    document.getElementById("new_page_conten开发者_高级运维t_it").style.display = "none";
    document.getElementById("new_page_content_en").style.display = "none";
    document.getElementById("new_page_content_fr").style.display = "none";
    document.getElementById("new_page_content_es").style.display = "none";
    document.getElementById("new_page_content_de").style.display = "none";

    document.getElementById(tab_id).style.display = "block";

}
</script>

And here there is the html:

<div id="new_page_tab_container"> 
    <a href="#" OnClick="javascript:collapser('new_page_content_it')"> 
        <div id="new_page_tab_it">Italian</div> 
    </a> 
    <a href="#" OnClick="javascript:collapser('new_page_content_en')"> 
        <div id="new_page_tab_en">English</div> 
    </a> 
    <a href="#" OnClick="javascript:collapser('new_page_content_fr')"> 
        <div id="new_page_tab_fr">French</div> 
    </a> 
    <a href="#" OnClick="javascript:collapser('new_page_content_es')"> 
        <div id="new_page_tab_es">Spanish</div> 
    </a> 
    <a href="#" OnClick="javascript:collapser('new_page_content_de')"> 
        <div id="new_page_tab_de">German</div> 
    </a> 
</div> 
<div id="new_page_content_it"> 
    <textarea name="content_it" id="content_it" cols="90" rows="40">italian</textarea> 
</div> 
<div id="new_page_content_en"> 
    <textarea name="content_en" id="content_en" cols="90" rows="40">english</textarea> 
</div> 
<div id="new_page_content_fr"> 
    <textarea name="content_fr" id="content_fr" cols="90" rows="40">french</textarea> 
</div> 
<div id="new_page_content_es"> 
    <textarea name="content_es" id="content_es" cols="90" rows="40">spanish</textarea> 
</div> 
<div id="new_page_content_de"> 
    <textarea name="content_de" id="content_de" cols="90" rows="40">german</textarea> 
</div> 
<div id="new_page_save"> 
    <input type="submit" value="Salva"/> 
</div>

The css define content_it visible but any other content_xx as display:none;

why the cols property is not readed? but most important... how to get rid of this problem?

Thanks!

As a start I would recommend you to validate your HTML. For instance you have div elements (block elements) inside anchor elements (inline elements) which is not valid. If you use Firefox I can recommend this HTML validator plugin:

http://users.skynet.be/mgueury/mozilla/