Smoothly rotate arrow image on click - CSS and Javascript toggle

How to smoothly rotate arrow image by 180 degree, when I click on the link ? I am looking for a simple CSS and Javascript toggle solution.

Hi,

To smoothly rotate an image on click, you can use the following solution, based on simple Javascript, CSS transform and transition. The Javascript function is changing the CSS styles:


<script>

function linkToggle(id) {

var i = document.getElementById('a'+id);
i.classList.toggle('arrowUp');
var c = document.getElementById('c'+id);
if(c.style.display=='block'){ c.style.display='none'; }
else { c.style.display='block'; }
}

</script>

<style>
.arrowDown {
display: block;
border: 0px;
transition: all 0.3s;
}

.arrowUp {
transform: rotate(-180deg);
}

.content {
display: none;
}
</style>

<a href="javascript:void(0);" onClick="javascript: linkToggle('1'); " ><img src='arrow.png' alt='toggle' class='arrowDown' id='a1' /></a>
<div class='content' id='c1'>Text content</div>