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
?
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>
You can simply use transform
CSS property. Read more about it in MDN docs .
$('.click').on('click', function(){ $(this).next('div').toggle(100) $(this).children('i').toggleClass('rotate'); });
.click{ cursor: pointer; } .rotate { transform: rotate(270deg); }
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.