Height dinâmico em 'carrinho de produtos'

[Felipe Evangelista 2]

Eu tenho uma div que serve como um carrinho de produtos, ela fica fixa no topo da tela onde só aparece o subtotal de todos os produtos escolhidos e ao clicar sobre a div, ela faz um efeito de slide para baixo e mostra todos os produtos. 

 

Eu fiz o efeito do slide com animação no css, e eu deixo a div fixa no topo com Top negativo, de acordo com o tamanho da div, por exemplo, top: -370px. O problema é que o tamanho da div é dinâmico, aumenta conforme vai sendo adicionados produtos,  então mesmo com o top negativo, a div não 'esconde' todos os produtos. Já tentei ir mudando a propriedade top conforme os botões de adicionar produto são clicados, o que dá certo, porém não sei como mudar o top da animação que faz descer e subir a div. Alguém sabe se tem como mudar essa propriedade ou se há uma forma melhor de fazer esse efeito? 

Pra ficar mais fácil o entendimento: https://jsfiddle.net/84rczeds/2/

[Fabio Victor 25]

Use o toggle, fica mais fácil de controlar isso

 

$('.subtotal-menu').click(function() {
        $(".produtos").toggle( "slow" );
});

.subtotal {
  position: relative;
  width: 200px;
  margin: 0 auto;
}

.produtos {
  display: none;
}

 

http://api.jquery.com/toggle/