<script>
$('li>label').click(function(e){ $('.arrow').toggleClass('arrow-down'); });
</script>

<style>
.arrow {

  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 15 25.5' width='15' height='25' fill='%23fd4f00' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 25.5L0 22l8.1-9.3L0 3.4 4 0l11 12.7L4 25.5z'/%3E%3C/svg%3E");
    height: 25.5px;
    fill: #c20430;
    display: block;
    width: 15px;
    height: 25px;
    position: absolute;
    right: 10;
    top: 25.5;
    margin-top: -10px
    -moz-transition: all 0.75s ease;
    -webkit-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;

}


.arrow-down {

    -moz-transition: all 0.75s ease;
    -webkit-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;
    transform: rotate(90deg);

}
</style>