jQuery: Toggle rotate div on click function - html

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!

Answer 1

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/

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

Answer 3

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.

Answer 4

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/