Question

I’m already using a plugin to handle the CSS3 attribute. It works when clicking it, and rotates 45 deg, but when it is clicked again to hide the content it isn’t rotated back. ANy thoughts on how to get this working?

$("#faq dt").click(function() {
    $(this).next('dd').slideToggle('fast');
if ($(this).next('dd').is(':visible')) {
 $(this).children('span').transition({ rotate: '45deg' });
 }
else {
 $(this).children('span').transition({ rotate: '-45deg' });
 }
});

You can view the live site here: http://www.revival.tv/lastdays/

WORKING SNIPPET:

$("#faq dt").click(function() {
$(this).next('dd').slideToggle('fast', function() {
    if ($(this).is(':visible')) {
         $(this).prev('dt').children('span').transition({ rotate: '45deg' });
    } else {
         $(this).prev('dt').children('span').transition({ rotate: '0deg' });
    }
 });
});

Answer 1

It is like this. What I know is that when you trigger slideToggle of dd, dd is still visible until the toggle animation ends. Therefore you should judge if dd is visible after the animation as a callback function.

Documentation is here

$("#faq dt").click(function() {
    $(this).next('dd').slideToggle('fast', function() {
        if ($(this).is(':visible')) {
             alert('1');
        } else {
             alert('2');
        }
    });
});

EDIT

Sometimes, element selection is a problem. I just replace them with alert('1') and alert('2'). I hope you catch the main point.