jQuery Toggle Transform translate3 value

Question

I have a javascript function which goes like this:

function toggle() {
  $('.sidebar').toggle();
}

And this I can some css for a sidebar:

.sidebar {
  transform: translate3d(-280px, 0px, 0px);
  position: absolute;
  width: 280px;
  background: #263249;
  color: #eee;
  left: 0;
  height: 100%;
  transition: all .3s;
}

This sidebar is now hidden but when I run the toggle function I need it to toggle this value:

transform: translate3d(0px, 0px, 0px);

How can I do this?

Answer 1

You can use toggleClass

 function toggle() { $('.sidebar').toggleClass('newValue'); }

 .sidebar { transform: translate3d(-280px, 0px, 0px); position: absolute; width: 280px; background: #263249; color: #eee; left: 0; height: 100%; transition: all.3s; }.newValue { transform: translate3d(0px, 0px, 0px); }