Why does .toggle not work for the first function?

Question

I've created a simple menu with a button of which when clicked on should change the size of the menu at alternating heights, I keep receiving some weird action of which my menu just shrinks to the bottom left of the document disappears then reappears the same height; that's how I found out the second function was being executed but not the first. I've changed the code many times but I can't find a solution, maybe someone can help. Here's my code.

$(document).ready(function () {
    $("#HideShow").addClass("fa fa-bars").click(function () {
        $("#editor").toggle(function () {
            $("#editor").slideToggle("fast", function () {
                $("#editor").height(20);
            });
        }, function () {
            $("#editor").slideToggle("fast", function () {
                $("#editor").height(150);
            });
        });
    });
});

maybe I'm just not getting it, I am fairly new to this so if I am doing something wrong PLEASE correct me.

Provide minimalistic sample on jsFiddle which reproduces your issue. — Daan, Oct 15 '14 at 07:00
What do you mean by "change the size of the menu at alternating heights"? — void, Oct 15 '14 at 07:03
See here [Where has fn.toggle( handler(eventObject), handler(eventObject)…) gone?](http://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone) — Anujith, Oct 15 '14 at 07:11

anssias · Answer 1 · 2014-10-15T07:37:36.920

0

I think you are not quite following the jQuery API. If I understood correctly you should probably use classes for opened and closed menus. Then you can use a simple jQuery event to toggle the classes. Something like this:

Code:

$('#HideShow').click(function() {
  $(this).toggleClass('closed');
});

CSS:

<style>
.closed {
  height: 20px;
}
</style>

edited Oct 15 '14 at 07:37

answered Oct 15 '14 at 07:19

anssias

1,994
2
16
21

1

... you can use `.toggleClass("closed");` instead of what you did with `hasClass()` and `if else` – Roko C. Buljan Oct 15 '14 at 07:33
1

also I think you're not quite following the jQuery API, `('editor')` is not a jQuery wrapped selector (And neither is a valid selector). – Roko C. Buljan Oct 15 '14 at 07:35
Thanks, this makes much more sense! – Grandmaster27971 Oct 15 '14 at 16:38

score 0 · Answer 2 · answered Oct 15 '14 at 07:46

The reason is because when .toggle() is called with more than one parameter, the first one is expected to be "a string or number determining how long the animation will run", and the last one "a function to call once the animation is complete" (see documentation). This is why the first function you pass in is not executed, while the second one is.

As others have already proposed, one possible way to get what you want would be:

CSS:

#editor {
    height: 150px;
}
#editor.closed {
    height: 20px;
}

Javascript:

$("#HideShow").click(function() {
    $("#editor").toggleClass('closed');
});

Why does .toggle not work for the first function?

2 Answers2