jQueryでアコーディオン/ボタンをアニメーション回転させる

jQueryでアコーディオン/ボタンをアニメーション回転させる

基本的にはjQueryでアコーディオン（クリック開閉メニュー)と同様の手法

あわせて読みたい

jQueryでアコーディオン（クリック開閉メニュー)の書き方 【jQueryでアコーディオン（クリック開閉メニュー)】 slideToggle（）を使って実装するのがかんたん。hover,clickをEventListenerにしてslideToggle（）を実行させる例...

トリガーとなるボタンの位置は絶対配置で指定。
toggleClassでクラスを追加したときにCSSで回転させる。
回転アニメーションはさせる場合には「transition」の指定が必要。

<ul>
<li class="aco">
<a href="">メニュー親</a>
<div class="acoTriger">▲</div>
<div class="sub">
    <ul>
      <li><a href="">メニュー子A</a></li>
      <li><a href="">メニュー子B</a></li>
    <ul>
</div>
</li>
</ul>     

CSS

.sub{
  display:none;
}
.aco{
   width:400px;
  padding:20px;
  min-height:300px;
   background:yellow;
    position: relative;
    }
.acoTriger{
        position: absolute;
        right: 10px;
        top: 0;
        margin-top: 10px;
        width: 30px;
        height:30px;
  text-align:center;
       border:1px solid red;
        cursor: pointer;
        transition: all .4s;
        
        transform-origin: center center;
     
    }
.acoTriger.opened {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
        -webkit-transform:  rotate(90deg);
        transform: rotate(90deg);
}
   

JavaScript

$(function() {
    $('.acoTriger').click(function(){
        $(this).toggleClass('opened').next().stop().slideToggle('400');
        return false;
    });
});                            
   
  

See the Pen
jQueryでアコーディオン/ボタンをアニメーション回転させる by miccyome (@miccyome)
on CodePen.