Display header cart contents when product added

[handcoded]

Hi

I want to open the header cart box when a product is added to the cart.

1. Customer goes to product view page and clicks buy now button
2. Page reloads and header cart expands to show that the item has been added.
3. Header cart closes after 10 seconds 

http://s27.postimg.org/iwjyqfvgj/cart_screen.png

Website link

http://bit.ly/1HXkrRz

Here is the code for the button

<div class="add-to-cart">
<div class="item-addcart">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>
</div>
</div>

Here is the code for the header cart which expands on mouse hover to show the content of the cart

<div class="block-cart header-cart pull-right" id="ajaxcart">
<div class="block-header-cart">
<div class="header-cart-title">
<i class="icon-cart"></i>
<span class="badge">0 Item(s): <span class="price">£0.00</span></span> 
</div>
<div class="header-cart-content">
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
</div>

I've added some javascript to the product view page but it is not working

<script>
$('.btn-cart').click(function(){
$('#ajaxcart').trigger('click'); // this will open the cart if it was already closed
setTimeout(function(){$('#ajaxcart').trigger('click');},15000); // this will close the cart after 15 seconds. 
});
</script>

and

<script>

jQuery(document).ready(function(){
cart_autoopen();
});
function cart_autoopen(){
$('.btn-cart').click(function(){
$('#ajaxcart').trigger('mouseover'); // this will open the cart if it was already closed
setTimeout(function(){$('#ajaxcart').trigger('mouseleave');},15000); // this will close the cart after 15 seconds. 
});
}
</script>

I'd really appreciate some advice as to how I can achieve this.

Thanks