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.
give a positive ratinggive a negative rating
06 Jul 2022 at 04:05 PM

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:


function linkToggle(id) {

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


.arrowDown {
display: block;
border: 0px;
transition: all 0.3s;

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

.content {
display: none;

<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>

give a positive ratinggive a negative rating
09 Jul 2022 at 11:53 AM
Share on FacebookShare on TwitterShare on LinkedInSend email
2024 AnswerTabsTermsContact us