Animate Back When Panel Has Been Closed

I have some arrows on the right side of my panels. So when I click on them, they get rotated. $('.arrow').click(function() { $(this).css('transform', 'rotate(90deg)'); }); I

Solution 1:

You don't have to use JavaScript for that. You can change transform based on the collapsed class.

.panel-heading.arrow {
  transform: rotate(90deg);
}
.panel-heading.collapsed.arrow {
  transform: rotate(0);
}

JSFIDDLE

Solution 2:

js:

$('.arrow').click(function() {
    $(this).toggleClass('turn');
});

css:

.turn{
  -webkit-transform : rotate(90deg);
}

Solution 3:

Hi try with following code..

$('.arrow').click(function() {

    var _flag; 
    // storing previous state..if(!$(this).attr('rotated'))
        _flag = true;
    else
        _flag = false;

    $(".arrow").css('transform', 'rotate(0deg)').removeAttr('rotated'); // this will reset all other arrow..// Applying new state...if(_flag)
       $(this).attr('rotated',true).css('transform', 'rotate(90deg)');
});

Solution 4:

Maintain an open state and check that

varopen = false;
$('.arrow').click(function() {
  open = !open;
  if(open)
        $(this).css('transform', 'rotate(90deg)');
  else
    $(this).css('transform', 'rotate(0deg)');
});

JSFIDDLE