I want to make a button that rotates itself after click

Question

I want to to make a button that rotates itself after click. The button has a dynamic name (id, class). When clicked it shows or hides a part of a wordpress post. When post is unwrapped I want it to point upwards, when wrapped downwards.

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

I believe that I have to add a css class to the button but then I have to remove it after the second click. I got a bit lost, maybe there's a simpler way of doing it?

Answer 1

Simplest method 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>