Criar Tabela No Evento On Click De Um Check

[Halfar]

Tenho a seguinte tabela:

<table><tr>

<td>

<input type="checkbox" name="checkParcelas" onClick = "Vencidas();" value="">

calcular parcelas vencidas</td></tr></table>

O que eu quero é quando o check for selecionado uma outra tabela apareca logo abaixo da tabela acima, e quando for desmarcado esta tabela deve sumir.

Inicialmente eu tentei fazer assim, criei uma funcao js:

function Vencidas(){

if(document.getElementById("checkParcelas").checked == true){

document.write("<table width = 80% class=hist border= 0 align=center>");

document.write("<tr><td>teste</td></tr></table>");

}

}

O problema aqui é que a tabela está sendo criado numa nova janela do navegador, eu queria que a tabela aparecesse logo abaixo da tabela acima.

O efeito que estou procurando é algo parecido quando voce clica num menu, ai expande e mostra os itens do menu, não precisa ser exatamente seguindo o esquema do codigo acima que estou tentando fazer, se tiver alguma outra sugestao, também serve.

[.Andreia.]

Use uma DIV com uma tabela dentro, dai é só exibir e esconder conforme a opcao do checkbox

[Halfar]

voce teria um exemplo de como fazer isto? Porque a única maneira que encontrei de fazer isto, é utilizando a funcao que escrevi em js, sendo assim, irá ocorrer o mesmo, a div irá aparecer numa outra janela...

[.Andreia.]

<script>
function Exibe()
{
    if (document.getElementById("div1").style.display == 'none')
        document.getElementById("div1").style.display = 'block';
    else
        document.getElementById("div1").style.display = 'none';
}
</script>


Checkbox: <input type="checkbox" name="chk" onclick="Exibe()">
<br><br>
<div id="div1" style="display:none">
<table border="1">
    <tr>
        <td>Linha 1</td>
    </tr>
</table>
</div>