jQuery: Toggle rotate div on click function

Question

I'm trying to work out if it's possible to toggle the rotation of a div on a click function, e.g. Clicking on a menu button rotates the arrow from pointing downwards to upwards and clicking again will reverse this (upwards to downwards).

I have a jsfiddle demo setup which will make more sense of it: http://jsfiddle.net/bf7Ke/1/
jQuery —

$(document).ready(function(){
        $('.menu-category-title').click(function(){
              $('#menu-'+$(this).attr('hook')).fadeToggle('slow');
              $(this).children('.menu-title-arrow').rotate({animateTo:180});

        return false;
    });
});

Thus far clicking on .menu-category-title fades in the relevant content below and rotates the corresponding arrow by 180 degrees. Clicking .menu-category-title again fades out the relevant content but the arrow stays at 180 degrees. Is there anyway to toggle this function also?
I can't figure it out, any suggestions would be greatly appreciated!

this one also worked for you : stackoverflow.com/questions/37452477/… — RAJNIK PATEL
– RAJNIK PATEL, Commented May 3, 2017 at 9:40

krasu · Accepted Answer · 2013-05-29 22:49:47Z

2

Think you should check if element is visible or not before arrow rotation

$(document).ready(function(){
    $('.menu-category-title').click(function(){
        var elem = $('#menu-'+$(this).attr('hook')),
            arrow = $(this).children('.menu-title-arrow')

        if (!elem.is(':visible'))  {
            arrow.rotate({animateTo:180});
        } else {
            arrow.rotate({animateTo:360});
        }
        elem.fadeToggle('slow', function() {
        });

    return false;
   });
});

http://jsfiddle.net/bf7Ke/2/

answered May 29, 2013 at 22:49

krasu

2,03723 silver badges22 bronze badges

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

3 Comments

user1374796 Over a year ago

this one worked out as the best solution, cheers for your help, exactly what I was after :)

Roko C. Buljan Over a year ago

What's the return false for? and why not to invert the logic by simply if (elem.is(':visible')) { <-- swap logic inside? Since when attr hook is a valid HTML attribute?

krasu Over a year ago

What's the return false for? - was in original code, not needed at all as I see why not to invert the logic by simply if (elem.is(':visible')) { just because I was in hurry =)

Community · Accepted Answer · 2017-05-23 12:26:03Z

2

How about this to fit your need: http://jsfiddle.net/HMKXq/

OR bit of the animated demo here: http://jsfiddle.net/HMKXq/2/

Good source: Rotate image on toggle with jQuery

Hope it helps :)

code

$(document).ready(function () {
    $('.menu-category-title').click(function () {
        $('#menu-' + $(this).attr('hook')).fadeToggle('slow');
        $(this).children('.menu-title-arrow').toggleClass("rotate1 rotate2");

    });
});

css

.menu-category-title {
    position: relative;
    height: 70px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    border-bottom: 1px solid black;
    cursor: pointer;
}
.menu-food-wrap {
    position: relative;
    margin-top: 25px;
    padding-bottom: 45px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 15px;
    border-bottom: 1px solid black;
    display: none;
}
.rotate1 {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.rotate2 {
    -webkit-transform: rotate(-180deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered May 29, 2013 at 22:51

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

3 Comments

Roko C. Buljan Over a year ago

nice example, (I just hate those -browser-specifics) but hopefully your version is less code that using an additional plugin, just I'm concerned about older browsers that might be covered by the plugin.

Tats_innit Over a year ago

@RokoC.Buljan Agreed, +1 Bruvo. OP please do check browser. Hope you are well Roko B-). Although I would recommend to OP to upgrade browser as the JQ version OP is using is 1.8.3 which is quick latest. :)) Why to use ferrari to moe the lawn :)

Roko C. Buljan Over a year ago

°D° +1 Good explanation. and another +1 for asking me if my coffee is hot enough ;) nice to see you around.

Roko C. Buljan · Accepted Answer · 2013-05-29 22:55:40Z

1

return false is not needed in your case, additionally hook attribute is not a HTML attribute, therefore it's invalid.
Use data-hook attribute instead.

FIDDLE DEMO

<div class="menu-category-title" data-hook="01">

Than do like:

$(document).ready(function () {
    $('.menu-category-title').click(function () {
        var dat = $(this).data('rotate');
        $(this).data('rotate', !dat? 0 : 180);
        $('#menu-' + $(this).data('hook')).fadeToggle('slow');
        $(this).children('.menu-title-arrow').rotate({animateTo: dat});
    });
});

what this does is setting an additional data (rotate) on click, than using a ternary operator ( ? : ) set respectively to 0 : 180 depending on the boolean/value returned by var dat.

edited May 29, 2013 at 22:55

answered May 29, 2013 at 22:49

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

Tats_innit Over a year ago

oh +1 hope your coffee is hot enough :P

Filippos Karapetis · Accepted Answer · 2013-05-29 22:50:04Z

0

You need to restore the div's angle to 0 when closing the div. Try this:

$(document).ready(function(){
        $('.menu-category-title').click(function(){
              var targetAngle = $('#menu-'+$(this).attr('hook')).is(":visible") ? 0 : 180;
              $('#menu-'+$(this).attr('hook')).fadeToggle('slow');
              $(this).children('.menu-title-arrow').rotate({animateTo:targetAngle});

        return false;
    });
});

Here's an updated jsFiddle:

http://jsfiddle.net/rFxJM/

answered May 29, 2013 at 22:50

Filippos Karapetis

5,20423 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQuery: Toggle rotate div on click function

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related