radiobutton mostra .div

Opa, tudo bem pessoal?

Estou com um formulário aqui e estou meio confuso quanto algumas opções, podem ajudar?

Vamos lá, vou bolar um exemplo bem simples para adaptar ao meu codigo aqui que é um pouco maior..

Ao selecionar(checked) 1 radiobutton, exiba outros 2 abaixo, dentro de uma div. Ou seja, ao selecionar 1 radiobutton, exibe uma div..

codigo exemplo:

<style type="text/css">
.invisivel { display:none; }

</style>

<form action="" method="post">

<h1> Que animal você tem? </h1>

<input name="animal" type="radio" id="gato" value="Gato" required> Um Gato <br>

 <div id="gato_div" class="invisivel">
 <h2> Qual a raça do gato? </h2>
 <input name="raca" type="radio" value="Persa" required> Persa <br>
 <input name="raca" type="radio" value="Siamês" required> Siamês <br>
 </div>

<input name="animal" type="radio" id="cachorro" value="Cachorro" required> Um Cachorro <br>

 <div id="cachorro_div" class="invisivel">
 <h2> Qual a raça do cachorro? </h2>
 <input name="raca" type="radio" value="Bulldog" required> Bulldog <br>
 <input name="raca" type="radio" value="Pit Bull" required> Pit Bull <br>
 </div>

<input name="enviar" type="submit" value="Enviar">

</form>

Ou seja, se a pessoa selecionar o RADIO id="gato", é exibida a DIV id="gato_div", mas se selecionar o RADIO id="cachorro", A DIV id="gato_div" vai sumir e a DIV id="cachorro_div" vai aparecer..

Bom é isso, tentei explicar da forma mais simples possivel.

Alguem poderia ajudar? Nao entendo nada de javascript/jquery, rs.

Valeu pessoal!