Convert Jquery slidetoggle code to Javascript

Question

How can I convert the jQuery slidetoggle() function into Javascript?

 var $context = getContext(context);

        $($context).on(\'click\', \'.m_menu\', f         


        

Answer 1

A solution more simple in vanilla i leave it here html->

  
    
    
    
    
    
  
  
    

      
Menu
      

        
Item 1
        
Item 2
        
Item 3
      
    
    

      text behind of menu
    
  

CSS

* {
  box-sizing: border-box;
}
.menu {
  display: block;
  position: relative;
  background-color: rgba(255, 0, 0, 0.3);
  width: 150px;
  height: 40px;
  font-family: monospace;
}

.dropdown {
  background-color: #4caf50;
  box-shadow: inset 2px 2px 30px 10px lime;
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 7px 35px;
  color: white;
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 1.5em;
  font-weight: 900;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.menu_main {
  position: absolute;
  height: 0%; /* 300 */
  width: 100%;
  overflow: hidden;
  transition: height 1250ms;
  background-color: rgba(0, 255, 0, 0.2);
}

.menu__item {
  font-size: 1.4em;
  text-align: center;
  font-weight: 900;
  line-height: 40px;
  height: 34%;
  background-color: rgb(189, 243, 201);
}

JS

document.addEventListener("DOMContentLoaded", function () {
  const boton = document.getElementsByClassName("dropdown")[0];

  boton.addEventListener(
    "click",
    function (e) {
      if (
        window
          .getComputedStyle(e.target.nextElementSibling, null)
          .getPropertyValue("height") == "0px"
      ) {
        e.target.nextElementSibling.style.height = "300%";
      } else {
        e.target.nextElementSibling.style.height = "0%";
      }
    },
    false
  );
});

this code does not have slideUp and SlideDown, it has all together. to use it once