In the navbar, I have a cart button that is supposed to toggle open when it is clicked on and close when the close button is clicked on. For some reason, it isn’t working.
I created an .active
class in the CSS styling and I used querySelector()
to get the #cart-btn
id and the .close
class as well. I tried to add the cart-item-container
class when the cart-btn
is clicked and remove it when the close button is clicked on
let shoppingcart = document.querySelector('.cart-items-container');
document.querySelector('#cart-btn').onclick = () => {
shoppingcart.classList.add('active');
}
document.querySelector('.close').onclick = () => {
shoppingcart.classList.remove('active');
}
header .icons #cart-btn {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
left: 70px;
}
header .icons #cart-btn .totalQuantity {
position: absolute;
top: -5px;
right: 15px;
font-size: 10px;
background-color: #b31010;
width: 15px;
height: 15px;
border-radius: 50%;
color: var(--white);
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(20px);
}
header .cart-items-container {
color: var(--light-black);
position: fixed;
top: 0;
right: -100%;
width: 400px;
height: 100vh;
background: var(--white);
display: flex;
flex-direction: column;
padding: 25px;
box-sizing: border-box;
transition: right 1s;
}
header .cart-items-container .active {
right: 0;
}
<div class="icons">
<div class="iconCart">
<div id="cart-btn" class='bx bx-shopping-bag'>
<div class="totalQuantity">0</div>
</div>
</div>
<div id="account-btn" class='bx bx-user'></div>
<div id="menu-btn" class='bx bx-menu'></div>
</div>
<!--SHOPPING CART-->
<div class="cart-items-container">
<!--div id="close" class='bx bx-x'></div-->
<h2>CART</h2>
<div class="listCart">
<div class="item">
<img src="images/shop-3.png" alt="">
<div class="content">
<div class="name">
Product Name
</div>
<div class="price">
$50/1 product
</div>
</div>
<div class="quantity">
<button>-</button>
<span class="value">3</span>
<button>+</button>
</div>
</div>
</div>
<div class="buttons">
<div class="close">CLOSE</div>
<div class="checkout">
<a href="checkout.html">CHECKOUT</a>
</div>
</div>
</div>
2
Answers
This code achieves the behavoiur you expected.
Just the open button seems out of place there, so perhaps this is where you get lost.
Try writing your buttons as following:
You need to hide the cart contents using the
:not()
selector. Here’s a working version:Fiddle:
https://jsfiddle.net/8dam2769/3/
Snippet: