CODEWITHSUNDEEP
htmlrotationjquery
user1374796
user1374796

Reputation: 1582

jQuery: Toggle rotate div on click function

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!

Upvotes: 1

Views: 10868

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

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.

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

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);
}

Upvotes: 2

Filippos Karapetis
Filippos Karapetis

Reputation: 4652

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/

Upvotes: 0

krasu
krasu

Reputation: 2037

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/

Upvotes: 2

Related Questions