javascript - Rotate icon and toggle content onclick at the same time -
i'm trying rotate icon when click on link next icon. idea when click on link, icon rotate , content slide down. have manage make content slide down can't icon rotate in same script.
this script:
<script> $(function(){ $(".change_delivery_address").click(function(){ $(".spm").slidetoggle(); }); });
this de html:
<div class="change_delivery_address"><h6>choose delivery address<img src="images/layout- img/menu-icons/arrow_carrot-right.png"></h6> </div>
the css:
.change_delivery_address h6{ cursor: pointer; color: #3274f4; margin-top: 20px; padding-top: 5px; padding-left: 20px; } .change_delivery_address h6:active{ background: none; } .spm { display: none; }
hope can me out thanks.
it looks though problem haven't included rotation in click
function.
include jqueryrotate
, small library allows rotation, adding
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jqueryrotate.js">
and script should this. because i'm assuming want rotate , rotate back, i'm adding boolean check way it's rotated , act accordingly because there's no rotatetoggle
:
var rotated = false; $(".change_delivery_address").click(function(){ $(".spm").slidetoggle(); if(rotated) { rotateangle = -90; } else { rotateangle = 90; } $("img[src='images/layout-img/menu-icons/arrow_carrot-right.png']").rotate(rotateangle) });
Comments
Post a Comment