Review this generated cart panel before it ships.
Open and close an accessible cart panel with a short slide transition, including a reliable reduced-motion path.
HTML
<button id="open-cart">Open cart</button>
<aside id="cart" class="cart" hidden tabindex="-1">
<button id="close-cart">Close</button>
<p>Your cart is ready.</p>
</aside>
<style>
.cart {
position: fixed;
left: -22rem;
transition: all 300ms ease;
}
.cart.open { left: 0; }
</style>
<script>
const cart = document.querySelector('#cart');
document.querySelector('#open-cart').onclick = () => {
cart.hidden = false;
cart.classList.add('open');
};
document.querySelector('#close-cart').onclick = () => {
cart.classList.remove('open');
cart.hidden = true;
};
cart.addEventListener('transitionend', () => cart.focus());
</script>
generated code is illustrative, not from any one model