Reza Reza - 8 days ago 5
Javascript Question

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 would now like to rotate them back to the starting point if the panel has been closed.

My code is not very advanced but this is what I have so far: https://jsfiddle.net/xvrccycm/

Answer

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