Jquery slidetoggle code to vanilla Javascript that ahndle multiple elements toggle-CodePudding

I have few elements I need to slide, but I don't want to attach whole jQ lib. I like jQ a lot, but whole lib is just overkill in this example.

How to convert jq slideUp/slideDown/toggle to vanilla JS with support of multiple elements passed to function?

JQ code:

var $context = getContext(context);

$($context).on('click', '.menu', function () {
    $('.nav').slideToggle();
});

JS code:

var list = document.getElementsByClassName("class1", "class2", "class3");
//or
var list = document.querySelectorAll("class1", "class2", "class3");

var slideUp = function(targets, duration){
    // execution
};

slideUp(list, 500);

SO wizards make it happen! :)

CodePudding user response：

you could just use css like so ( wasn't sure witch way you wanted to slid but this gives you an idea of how to do it):

var $slider = document.getElementById('slider');
var $toggle = document.getElementById('toggle');

$toggle.addEventListener('click', function() {
  var isOpen = $slider.classList.contains('slide-in');

  $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});

#slider {
  position: absolute;
  width: 100px;
  height: 100px;
  background: blue;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.slide-in {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  100% {
    -webkit-transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

<div id="slider" >
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>
</div>

<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>

I can't take credit for this its lifted from:

CSS 3 slide-in from left transition

I hope this helps

CodePudding user response：

Could you not simply include the css in the page header so wouldn't need to edit any style sheets, well in any case then how about this:

function SlideDown() {
  const element = document.getElementById("slider");
  let top = 0;
  const up = setInterval(MoveDown, 10);

  function MoveDown() {
    if (top == 50) {
      clearInterval(up);
    } else {
      top  ;
      element.style.top = top   '%';
    }
  }
}

function SlideUp() {
  const element = document.getElementById("slider");
  let top = parseInt(element.style.top);
  const down = setInterval(MoveUp, 10);

  function MoveUp() {

    if (top == -100) {
      clearInterval(down);
    } else {
      top--;
      element.style.top = top   '%';
    }
  }
}

<!DOCTYPE html>
<html>
  <body>
    <div id="slider" style="position:absolute; top: -100px;">
      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
      </ul>
    </div>
    <button onclick="SlideDown()">Slide Down</button>
    <button onclick="SlideUp()">Slide Up</button>
  </body>
</html>

I hope this helps