Toggle function on click

Question

Im working on function to toggle a menu on click but cannot make it work since it got deprecated with jQuery 1.9.

I have no idea how to manage to make work.

I want to click on the menu img once and expand the menu and the next time I do that it will hide again.

This is my code:

$(document).ready(function(){
$('.menu img').click(function(){
    var wWidth = $(window).width();
    var wHeight = $(window).height()
    $('.menu').animate({width: wWidth + 'px', height: wHeight + 'px'}, 500);
    $('.menu').toggleClass('menu_expanded');
});

Thanks in advance.

Here is the JSfiddle as request: http://jsfiddle.net/czef8ofb/

Could you give us a JSFiddle or a link so we can see the problem in action? — Robin
– Robin, Commented Aug 15, 2014 at 19:26

Marcel · Accepted Answer · 2014-08-15 19:34:42Z

1

You could try the following code – .hasClass() checks whether your navigation element has already been assigned the .menu_expanded class and shows/hides the menu accordingly.

$(document).ready(function(){
    $('.menu img').click(function(){
        var wWidth = $(window).width();
        var wHeight = $(window).height()
        if(!$('.menu').hasClass('menu_expanded')){
            $('.menu').animate({width: wWidth + 'px', height: wHeight + 'px'}, 500);
        }else{
            //code to hide menu again
        }
        $('.menu').toggleClass('menu_expanded');
    });
});

edited Aug 15, 2014 at 19:34

answered Aug 15, 2014 at 19:29

Marcel

6834 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Felix Kling Over a year ago

You might want to add an explanation so that others can learn something.

Marcel Over a year ago

Isn't .hasClass()rather self explanatory? :/

Marcel Over a year ago

@Fyxerz I have made a little change to the code, it should work now.

David Thomas · Accepted Answer · 2014-08-15 19:37:36Z

0

According to jQuery docs:

This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

So, use this one instead: animation method .toggle()

edited Aug 15, 2014 at 19:37

David Thomas

254k53 gold badges382 silver badges421 bronze badges

answered Aug 15, 2014 at 19:36

neli

1495 bronze badges

2 Comments

neli Over a year ago

Yes, but it seems to me, he doesn't know yet, that there is another .toggle() that replaces deprecated one.

Fyxerz Over a year ago

I know that there is an animation. The toggle I used to use was the event toggle not the animation one. The code below suggested by Marcel works just fine. A pitty they took toggle out...

Collectives™ on Stack Overflow

Toggle function on click

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related