클릭 후 자체적으로 회전하는 버튼을 만들고 싶습니다.

Question

클릭 후 스스로 회전하는 버튼을 만들고 싶습니다. 버튼에는 동적 이름 (id, 클래스)이 있습니다. 클릭하면 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

내가 버튼에 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; 
} 

. 좀 잃어 버렸어. 어쩌면 간단한 방법이 있을까?

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>