Ich möchte eine Taste machen, die sich nach dem Klick dreht

Question

Ich möchte eine Taste, die sich nach dem Klicken dreht. Die Schaltfläche hat einen dynamischen Namen (ID, Klasse). Wenn Sie darauf klicken, wird ein Teil eines WordPress-Posts angezeigt oder ausgeblendet. Wenn der Post ausgepackt wird, möchte ich, dass er nach oben zeigt, wenn er nach unten gewickelt wird. Ich muss es nach dem zweiten Klick entfernen

<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; 
} 

Ich glaube, dass ich eine CSS-Klasse auf die Schaltfläche hinzufügen, aber dann. Ich bin ein bisschen verloren, vielleicht gibt es eine einfachere Art, es zu tun?

Answer 1

Einfachste Methode 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>