クリック後に自分自身を回転させるボタンを作ってみたい

Question

クリック後に自分自身を回転させるボタンを作りたいと思います。ボタンには動的な名前（id、class）があります。クリックすると、ワードプレスの投稿の一部が表示または非表示になります。ポストがラップされていないとき、私はそれが下向きにラップされるとき、それを上向きにしたい。

<div> 
    <div class="button_wrap" id="opis<?php echo get_the_ID()?>"> <button class="button" type="button" id="button<?php echo get_the_ID()?>"></button> </div> 
</div> 
<script> 
    $("#button<?php echo get_the_ID()?>").click(function() { 
     $("#opis<?php echo get_the_ID()?>").slideToggle(1000); 
    }); 
</script> 

CSS

.button_wrap { 
    width: 100%; 
    height: 80px; 
    text-align: center; 
} 
.button { 
    background: url(/arrow.svg) no-repeat; 
    margin-top: 20px; 
    cursor: pointer; 
    height: 50px; 
    width: 75px; 
    border: none; 
    transition: .3s ease; 
    padding-bottom: 5px; 
} 
.button:hover { 
    background: url(/arrow.svg) no-repeat; 
    color: red; 
    cursor: pointer; 
    height: 50px; 
    width: 75px; 
    border: none; 
    transition: .3s ease; 
    margin-top: 13px; 
} 
.opisy { 
    display: none; 
} 

は私がボタンにCSSクラスを追加する必要がありますが、その後、私は2回目のクリックの後に、それを削除する必要があると考えています。私は少し失われて、多分もっと簡単な方法がありますか？

Answer 1

最も単純な方法です。

$('.btn').click(function(){ 
 
    $(this).toggleClass('rotate'); 
 
});

.btn { 
 
    transition: all 1s ease-in; 
 
} 
 

 
.rotate { 
 
    transform: rotate(360deg); 
 
    transition: all 1s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='btn'>content</button>