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

I am giving a lightweight answer. You can think of it as a skeleton example, and you can play with it, style it later, according to your preferences.

Before you begin, I would like to clarify that I'm not converting jQuery slideToggle() function into one in JavaScript

All I'm doing is, trying to replicate that function in the simplest possible form!

Step 1:

Create a button/(any other element), which you can link with an eventListener.

Step 2:

Create an element, which you want to toggle/slide/whatever you want to call it!

Step 3:

Go ahead with your javaScript, and create a conditional setInterval() for a function linked with that eventListener.

You can give your suggestions in the comment section.

var animxB = 0;
var anim2B = 0;
document.getElementById("animB").addEventListener("click", performB);

function performB() {
anim2B++;
anim3B = anim2B % 2;
var fram1B = setInterval(framB, 1);

function framB() {
    if (anim3B == 1) {
        animxB++;
        document.getElementById("divB").style.width = animxB + "px";
        document.getElementById("divB").style.height = animxB + "px";
        if (animxB >= 200) {
            clearInterval(fram1B);
            document.getElementById("animB").innerHTML = "Click(-)";
        }
    }
    if (anim3B == 0) {
        animxB--;
        document.getElementById("divB").style.width = animxB + "px";
        document.getElementById("divB").style.height = animxB + "px";
        if (animxB <= 0) {
            clearInterval(fram1B);
            document.getElementById("animB").innerHTML = "Click(+)";
        }
    }


}
}

Click(+)

    <path d="M10 10 v80 h80 v-80 h-80" fill="gray" stroke="black" stroke-width="1" /> <path d="M40 10 v20" stroke="blue" stroke-width="0.5" /> <path d="M10 30 h30" stroke="red" stroke-width="0.5" /> <circle cx="40" cy="30" r="2" fill="purple" stroke="purple" stroke-width="1" />