Como exibir/ocultar campos de acordo com seleção?

Segue o código:

<select id="tipo_pessoa" onchange="exibir_ocultar(this)">
 <option value="pessoa_fisica">PF</option>
 <option value="pesso_juridica">PJ</option>
</select>
<br /><br />
<div id="cnpj">CNPJ: <br /><input type="number"></div><br />
<div id="razao">Razão Social: <br /><input type="text"></div><br />
<div id="cpf">CPF: <br /><input type="number"></div><br />
<div id="nome">Nome: <br /><input type="text"></div>

<script>
function exibir_ocultar(val){
 var cpf = document.getElementById('cpf');
 var nome = document.getElementById('nome');
 var cnpj = document.getElementById('cnpj');
 var razao = document.getElementById('razao');

 if(val == 'pessoa_fisica'){}
 $(cnpj).hide();
 $(razao).hide();
 $(cpf).show();
 $(nome).show();
 }
 else{
 $(cnpj).show();
 $(razao).show();
 $(cpf).hide();
 $(nome).hide();
 }
};
</script>