Q:

Problema ao Exibir e Esconder Div com Jquery

Tenho um código, onde quero exibir o resultado de uma soma sem recarregar a página. Como exemplo, já defini valores iniciais nos campos.
*Problema: Tenho um div com id resultado que tem um css para ocultá-la em estado inicial. Ao clicar no botão de calcular tem uma função para exibir a div.
Existe outra função que vai pegar os valores dos campos input e exibir o resultado dentro da div com id normal. Esta div está dentro da div com id resultado.
Porém não sei porque a div com id resultado não está sendo exibida. Somente a div com id normal com o resultado. Se eu remover a função que faz a soma e clicar no botão a div com id resultado é exibida normalmente.
O código pode ser visto clicando aqui.

A:

Não notei no seu código nenhuma instrução para habilitar novamente o display da div resultado.
Fiz uma pequena modificação e agora seu código está funcionando.
PS: Evite usar a propriedade onclick das tags, use addEventListener ao invés.

document.getElementById("calcular").addEventListener("click", function() {
  var a = document.getElementById('a').value;
  var b = document.getElementById('b').value;
  document.getElementById("normal").innerHTML = (a / b);
  document.getElementById("resultado").style.display = "block";
});
.principal-i {
  width: 600px;
  height: 135px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  background: #ff7f27;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
}
.calcule {
  font-size: 15px;
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: center;
  font-weight: 600;
  margin-bottom: 20px
}
.col-md-34 {
  width: 28%;
  height: auto;
  float: left;
  margin-left: 7%;
  margin-right: 3%;
}
.col-md-34-2 {
  width: 28%;
  height: auto;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
}
.col-md-30 {
  width: 20%;
  height: auto;
  float: left;
  margin-left: 3%;
  margin-right: 7%;
}
input.campo-i {
  width: 100%;
  height: 55px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
}
.botao-calcular {
  background: #20a648;
  color: #ffffff;
  padding: 20px 20px;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}
.botao-calcular:hover {
  background: #1b923f;
}
#resultado {
  display: none;
}
.resultado {
  margin-top: 20px;
  width: 600px;
  height: auto;
}
.resultado-exibido {
  width: 100%;
  height: auto;
  border-radius: 15px;
  background: #ebebeb;
  padding: 15px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
.titulo-i {
  color: #7f7f7f;
  text-align: center;
}
.i-centro {
  width: 49%;
  float: left;
}
.text-align-left {
  text-align: left;
}
.text-align-right {
  text-align: right;
}
.resultado-valor {
  font-size: 30px;
  color: #009b36;
  font-weight: 700;
}
<div class="principal-i">
  <p class="calcule">Divisão de A por B</p>

  <div class="col-md-34">
    <input type="text" name="a" id="a" class="campo-i" placeholder="A" value="50">
  </div>
  <div class="col-md-34-2">
    <input type="text" name="b" id="b" class="campo-i" placeholder="B" value="10" />
  </div>
  <div class="col-md-30">
    <button type="submit" id="calcular" class="botao-calcular">Dividir</button>
  </div>

</div>

<div id="resultado" class="resultado">
  <div id="normal" class="resultado-exibido">
    <h2 class="titulo-i">RESULTADO</h2>
    <div class="i-centro text-align-right"></div>
    <div class="i-centro text-align-left">
      <div id="normal" class="resultado-valor"></div>
    </div>
  </div>
</div>

Espero ter ajudado.

