CODEWITHSUNDEEP
javascripthtmlcss
ItFreak
ItFreak

Reputation: 2369

ToggleClass rule is not applied

I have the following HTML/CSS/JS code:

function addClass() {
  document.getElementById('shopping-cart-body').classList.add('open');
}

function removeClass() {
  document.getElementById('shopping-cart-body').classList.remove('open');
}
.cart-preview .body {
  visibility: hidden;
  position: fixed;
  height: 100%;
  top: 0;
  width: 400px;
  background-color: #fff;
  right: -400px;
}

.cart-preview .body .open {
  visibility: visible;
  transition: right 1s linear;
  right: 0px;
}
<div id="blockcart-wrapper">
  <div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://placehold.it/100" onclick="addClass()">
      </a>
    </div>
    <div class="body" id="shopping-cart-body">
      <div class="close"><a href="" onclick="removeClass()">X</a></div>
      <ul>
      </ul>
      <div class="cart-subtotals">
        <div class="products">
          <span class="label">Subtotal</span>
          <span class="value">0</span>
        </div>
        <div class="">
          <span class="label"></span>
          <span class="value"></span>
        </div>

        <div class="shipping">
          <span class="label">Shipping</span>
          <span class="value">0</span>
        </div>
        <div class="">
          <span class="label"></span>
          <span class="value"></span>
        </div>
      </div>
      <div class="cart-total">
        <span class="label">Total</span>
        <span class="value">0</span>
      </div>
      <div class="checkout">
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
  </div>
</div>

I also tried to use toggle and when I alert the class list of the element, the new class is shown, but the css rule is not applied, the element gets not visible. Interesting: when alerting the class, the superclass of body (cart-preview) is missing, but the new one (open) is there.

For readability, the css only contains the two needed classes and not the whole style for the HTML part.

Can someone explain me, why this is not working?

Upvotes: 1

Views: 41

Answers (1)

Esko
Esko

Reputation: 4207

Your css is looking for an element with css-class .open under an element with .body class. That element does not exist. If you want the css to apply to element with both classes use .body.open

.cart-preview .body {
  visibility: hidden;
  position: fixed;
  height: 100%;
  top: 0;
  width: 400px;
  background-color: #fff;
  right: -400px;
}

.cart-preview .body.open {
  visibility: visible;
  transition: right 1s linear;
  right: 0px;
}

Upvotes: 4

Related Questions