Working on a website coding project and ran into an issue. Trying to utilize an img as a link to slideToggle content. It's working, but I'd like the img to rotate 90deg on the first click and -90deg on the second one. Any solutions are greatly appreciated. <3
This is the code snippet:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button_img').click(function() {
$('div.show_more_content').slideToggle(300);
$(this).children('img.button_img').toggleClass(".button_img").style.transform = "rotate(90deg)";
});
});
</script><div id="more">
<section id="show_more">
<div id="show_more_button"><img src="img/cross.png" class="button_img" id="button_img" height="100px" width="100px" />
</div>
</section>
<div id="show_more_content" class="show_more_content">
<ul>
<li>Welcome</li>
</ul>
</div>
</div>