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

0
give a positive ratinggive a negative rating
09 Jul 2022 at 11:53 AM
Tim
Share on FacebookShare on TwitterShare on LinkedInSend email
x
x
Follow us on Facebook
2022 AnswerTabsTermsContact us