stack stack - 3 months ago 11
CSS Question

How can I rotate an element?

Here is my code:



$('.click').on('click', function(){
$(this).next('div').toggle(100);
});

.click{
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="click">click <i class="fa fa-caret-down" aria-hidden="true"></i></div>
<div>something</div>





As you see that arrow (which is next to
click
)
is fixed .. How can I rotate it 45° when user click on the
div.test
?

Answer

Another option: you can use fontawesome's fa-caret-right and toggle it!

Let me know your feedback. Thanks!

$('.click').on('click', function(){
  $(this).next('div').toggle(100, 'linear', function(){
       $(this).prev('div').find('i').toggleClass('fa-caret-down');
       $(this).prev('div').find('i').toggleClass('fa-caret-right');
  });
});
.click{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="click">click  <i class="fa fa-caret-down" aria-hidden="true"></i></div>
<div>something</div>

Comments