slideToggle sibling on click without jQuery

Question

Hello, community.

I have this little super easy script to toggle a submenu when an arrow is clicked.

The problem is the site I develop this to can't use jQuery, and I know nothing of pure Javascript.

I'm following a lot of answers and trying to put together multiple pieces of code but this seems just way over my knowledge.

$('.mobile-submenu-toggler').click(function() {
    $(this).toggleClass('rotated');
    $(this).siblings('.submenu').stop().slideToggle(300);
});

The site is made in Angular, so that's so how can I convert this into pure JS/Angular?

Thanks a lot for your time and help!

Answer 1

Try this.

const el = document.querySelector(".mobile-submenu-toggle");

el.addEventListener("click", function(){
   el.classList.toggle("rotated");

   for (let sibling of el.parentNode.children) {
    sibling.classList.remove("stop-animation");
    sibling.classList.add("slide-toggle");
   }
})

For 'stop' and 'slideToggle' your best bet is to use CSS to simulate this. For example, using transition and/or @keyframes and simply remove/add the class to the element(s).