JQuery .toggle method

Question

I have the following JavaScript/JQuery code which should make the div SideBar appear on the screen and become 1/5th the size of the body. I'm getting no errors in Firefox/Chrome console, and havve no idea why it isn't working. If I move the body of my first toggle method into the method itself it works fine, so I'm assuming I'm using the toggle method wrong.

var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
sideWidth = bodyWidth / 5;

function slideSideBar() {
    $('#SideBar').toggle(
        function() {
            $("#SideBar").animate({
                opacity: 0.6,
                width: sideWidth
            }, 600);
        }, 
        function() {
            $("#SideBar").animate({
                opacity: 0,
                width: 0
            }, 600);
        });
}

The CSS is:

#SideBar { 
    height: 100%;
    width: 0%;
    opacity: 0;
    font-family: Arial, Tahoma, Verdana;
    color: white; 
    background-color: black;
}

How is slideSideBar called? and do you have the code in a dom ready handler ? — karthikr
– karthikr, Commented Jun 29, 2014 at 22:36
@karthikr I have a menu icon in my HTML code, which has the onclick event to call the function slideSideBar() — Connor Cartwright
– Connor Cartwright, Commented Jun 29, 2014 at 23:11

Community · Accepted Answer · 2017-05-23 12:11:00Z

As of jQuery 1.8, the toggle event (the version of toggle that accepted two functions) was deprecated, and as of 1.9, it was removed. More in this question and its answers.

To get the old toggle behavior, maintain your own flag (or in your case, check the opacity) and call the toggle method (not event) yourself.

Here's the flag method, since it may be more appropriate to an animate situation (note the use of stop, which you probably wanted even in <=1.8):

var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
sideWidth = bodyWidth / 5;

function slideSideBar() {
    var sidebar = $("#SideBar");
    var flag = sidebar.css("opacity") != 0;

    sidebar.click(function() {
        var options = flag ? {opacity: 0, width: 0} : {opacity: 0.6, width: sideWidth};
        flag = !flag;
        sidebar.stop(true, true).animate(options, 600);
    });
}

Or actually, checking opacity is fine after the stop:

var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
sideWidth = bodyWidth / 5;

function slideSideBar() {
    $("#SideBar").click(function() {
        var sidebar = $(this);
        sidebar.stop(true, true);
        sidebar.animate(
            sidebar.css("opacity") != 0 ? {opacity: 0, width: 0} : {opacity: 0.6, width: sideWidth},
            600
        );
    });
}

Collectives™ on Stack Overflow

JQuery .toggle method

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related