Я хочу сделать кнопку, которая вращается после нажатия

Question

Я хочу сделать кнопку, которая вращается после нажатия. Кнопка имеет динамическое имя (id, class). При нажатии на нее отображается или скрывается часть сообщения Wordpress. Когда почта развернута, я хочу, чтобы она указывала вверх, когда она была обернута вниз.

<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 к кнопке, но тогда я должен удалить его после второго щелчка. Я немного потерял, может быть, есть более простой способ сделать это?

Answer 1

Простейший способ imo.

$('.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>