Toggle style same as class in pure javascript

Question

I've got some code where when a button is clicked it toggles an active class. At the same time I need to set a top-margin on the toggled element, which also needs to be removed once the button is clicked again and the toggled class is removed. I can't set the top-margin as part of the active class as I need to get the value of the margin dynamically by checking the height of another element.

This is the code I've got to toggle the class and add the margin

var sizeBtn = document.querySelector(".size-toggle-btn");
var sizeItems = document.querySelector(".select-items");
var elementHeight = document.querySelector(".Detail-Container__inline").offsetHeight ;

sizeBtn.addEventListener("click", function(e) {
    sizeItems.classList.toggle('size-toggle--active')
    sizeItems.style.marginTop = "-" + elementHeight + "px";
});

However, obviously this doesn't remove the style when the button is clicked again so basically I need to toggle the style just like the active class. Is there anyway to do this?

uke · Accepted Answer · 2020-12-08 15:55:22Z

1

You need to check if className is there or not so the code could be:

var sizeBtn = document.querySelector(".size-toggle-btn");
var sizeItems = document.querySelector(".select-items");
var elementHeight = document.querySelector(".Detail-Container__inline").offsetHeight ;

sizeBtn.addEventListener("click", function(e) {
  if(sizeItems.classList.contains('size-toggle--active')) {
    sizeItems.classList.remove('size-toggle--active')
    sizeItems.style.marginTop = null;
  }
  else{
    sizeItems.classList.add('size-toggle--active')
    sizeItems.style.marginTop = "-" + elementHeight + "px";
  }
});

answered Dec 8, 2020 at 15:55

uke

8914 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Toggle style same as class in pure javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related