Dynamic height in 'product cart'

Question

I have a div which serves as a shopping cart, it is fixed at the top of the screen where only the subtotal of all products chosen and by clicking on the div, she makes a slide down effect and shows all the products.

I did the effect of slide animated in css, and I leave the div fixed at the top with Top negative, according to the size of the div, for example, top: -370px.

The problem is that the size of the div is dynamic, increases as products are added, so even with the top negative, div does not 'hide' all products. I’ve tried changing the top property as the add product buttons are clicked, which works, but I don’t know how to change the top of the animation that makes go down and up the div.

Does anyone know if there’s a way to change this property or if there’s a better way to do it?

To make it easier to understand: https://jsfiddle.net/84rczeds/2/

Answer 1

Wouldn’t it be better if you rethought your logic to make it easier?
So the code is doing too much unnecessary calculation, see an example:

Create a div to encompass the products and the subtotal and add the css to stay at the top, the structure html will stay like this:

<div class="engloba-tudo">

   <div class="produtos">
     // Sua lista de produtos
   </div>
   <div class="subtotal ">
     // Subtotal dos produtos
   </div>

</div>

Now just leave your div products with display:none; and how I saw that you are using Jquery can use the function slideToggle() that already saves enough code to show the products:

$(".subtotal").click(function() {
   $(".produtos").slideToggle(300);
})

Example in Jsfiddle.
But it’s just an idea, because as I’ve also made a cart with animation I know how annoying it is to maintain or change large code, besides having greater chance of crashes;

Answer 2

I don’t quite understand what you mean, but I think that’s what you want.

var subtotal = $('.subtotal').height();

$('.subtotal-menu').click(function(event) {
				$('.subtotal').addClass('slideDown').removeClass('slideUp');
				$('.subtotal-menu').hide();
				$('.close-subtotal').show();
});

$('.close-subtotal').click(function(event) {
				$('.subtotal').addClass('slideUp').removeClass('slideDown');
				$('.subtotal-menu').show();
				$('.close-subtotal').hide();
});

$('button').click(function() {
			$('.produtos').append('<p>Produto X</p><hr>');
      subtotal = $('.subtotal').height();
      $('.subtotal').css('top', '-'+subtotal+'px')
      alert(subtotal)
});

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

span {
  position: absolute;
  top: 0;
}

@keyframes slideDown {
  
  to {
    top: 0;
  }
}

.slideDown {
    animation-name: slideDown;
    animation-duration: .5s;
    animation-fill-mode: both;
}

@keyframes slideUp {
  from {
    top: 0;
  }
  
}

.slideUp {
    animation-name: slideUp;
    animation-duration: .5s;
    nimation-fill-mode: both;
}

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>

<div class="subtotal">
  <div class="produtos">
    <p>Produto 1</p>
    <hr>
    <p>Produto 2</p>
    <hr>
    <p>Produto 3</p>
  </div>
    <hr>
    <p>Subtotal: x</p>
  
 
</div>
 <span class="subtotal-menu" style="cursor: pointer;">O</span>
 <span class="close-subtotal" style="display: none; cursor: pointer;">X</span>
 
 <button>add Produto</button>